Pixi.js

Question

का उपयोग करते हुए ओडोमीटर एनीमेशन कुछ दिन पहले मैंने एचटीएमएल और जावास्क्रिप्ट में लिखे गए एनिमेटेड ओडोमीटर को विकसित करना शुरू कर दिया है, जिसे मैं एक आरपीजी गेम पर उपयोग करना चाहता हूं जिसे मैं विकसित कर रहा हूं। इसके अलावा, मैं एनिमेशन पर मेरी सहायता करने के लिए Pixi.js का उपयोग कर रहा हूं।

ओडोमीटर नंबर की

पंक्ति: 2 निम्न छवियाँ कार्यक्रम के मुख्य घटक हैं

और यहाँ मैं क्या कार्य किया है उसे का एक प्रिंट है अब तक:

असल में, पहले दो बटन वास्तविक एचपी और पीपी टेक्स्टबॉक्स में मौजूद वास्तविक एचपी और पीपी मानों के आधार पर ओडोमीटर छवि पर संख्याओं को तुरंत (बिना एनीमेशन के) अपडेट करते हैं। यदि 'सेट न्यू वैल्यूज' दबाया जाता है, तो यह वास्तविक और नए मानों के बीच अंतर की गणना करेगा, इसे पिक्सेल में परिवर्तित करेगा और फिर ओडोमीटर पर आवश्यक परिवर्तन करेगा। सभी परिवर्तन controller() विधि द्वारा किए जाते हैं। इस विधि के अंदर, एक समय लूप होता है जो तब टूट जाएगा जब एचपी और पीपी दोनों अंतर मान शून्य होते हैं।

मैंने controller() विधि को सही तरीके से प्रोग्राम करने में कामयाब रहा है, इसलिए ओडोमीटर में सभी संख्याओं को अपेक्षित के रूप में अपडेट किया गया है। हालांकि, मुझे एनिमेशन को कार्यान्वित करने में कुछ कठिनाइयों का सामना करना पड़ रहा है। जब से मैं Pixi.js का उपयोग किया गया है, मैं आदेश एनिमेशन की गतिविधियों बनाने के लिए एचटीएमएल कोड के लिए निम्न विधि जोड़ दिया है:

function update() { 
    renderer.render(container); 

    window.requestAnimationFrame(update); 
} 
window.requestAnimationFrame(update); //called after the method definition 

कंटेनर के रूप में नीचे दिखाया गया है परिभाषित किया गया है (मैं भी एक PIXI उपयोग कर रहा हूँ। extras.TilingSprite.call() दोनों ओडोमीटर और HPPP) के निर्माण के वर्ग के अंदर:

function init() { 
    container = new PIXI.Container(); 
    renderer = PIXI.autoDetectRenderer(224, 219, {view:document.getElementById("odometer-canvas")}); 
    odometer = new Odometer(); 
    container.addChild(odometer); 
    hph = new HPPP(96, 85, 0, 0); //HP - Hundred digit (left) 
    container.addChild(hph); 
    hpt = new HPPP(128, 85, 0, 0);//HP - Ten digit (middle) 
    container.addChild(hpt); 
    hpu = new HPPP(160, 85, 0, 0); //HP - Unit digit (right) 
    container.addChild(hpu); 
    pph = new HPPP(96, 140, 0, 0);//PP - Hundred digit (left) 
    container.addChild(pph); 
    ppt = new HPPP(128, 140, 0, 0); //PP - Ten digit (middle) 
    container.addChild(ppt); 
    ppu = new HPPP(160, 140, 0, 0); //PP - Unit digit (right) 
    container.addChild(ppu); 
    } 

अब तक, मैं 2 परिदृश्य का अनुभव किया है: पहले एक (जहां onClick=controller(), 'सेट नया मान' बटन के लिए), यदि कोड को कोई संशोधन के साथ निष्पादित नहीं किया गया है, तो प्रोग्राम चलाएगा और ओडोमीटर संख्या तुरंत अपडेट हो जाएगी, जिसका अर्थ है कि बी ई कोई एनीमेशन।

हालांकि, अगर controller() विधि update() विधि की शुरुआत में जोड़ा जाता है, संख्या बहुत तेजी से चेतन जाएगा, लेकिन सीमा अंतर मूल्यों द्वारा परिभाषित आज्ञा का पालन नहीं किया जाएगा (जिसका अर्थ है कि यह अनिश्चित काल के लिए 000 से करने के लिए चेतन जाएगा 999)।

मैं अभी भी HTML और जावास्क्रिप्ट विकास पर वास्तव में ताजा हूं, और मुझे यह भी नहीं पता कि Pixi.js इसके लिए सबसे अच्छा विकल्प होगा या नहीं। वैसे भी, क्या इस ओडोमीटर के लिए चिकनी और नियंत्रित एनिमेशन करना संभव है?

के बाद से मैं अपने कोड से कई विवरण पोस्ट नहीं किया था, मैं यहाँ अपने प्रोजेक्ट के स्रोत कोड प्रदान करेगा (नोट: यह शीघ्र Node.js का उपयोग कर क्रियान्वित किया जा सकता): http://www.mediafire.com/download/gfvpajsk7ft1gcd/parallax_odometer.rar

Answer 1

मैं करने के लिए प्रबंधित किया है कुछ दिन पहले इस समस्या का हल ढूंढें। असल में, मैं नियंत्रण विधि के अंदर कुछ चर के साथ गड़बड़ कर रहा था (windows.requestAnimationFrame (अद्यतन) पर प्रत्येक पुनरावृत्ति के लिए वैरिएबल मान समान थे) और मैं गणना के लिए थोड़ी देर लूप का भी उपयोग कर रहा था, जो विंडो टैब को ठंडा कर रहा था ।

वैसे भी, मैं इसे साफ़ करने और व्यवस्थित करने के बाद बाद में अपने स्रोत कोड को सही समाधान के साथ अपलोड कर दूंगा।