मैं विश्व हीलिंग वेव प्रभाव कैसे बनाऊं?

Question

मैं अपनी अंधेरे और निराशाजनक पृष्ठभूमि को खुशहाल घास की पृष्ठभूमि में बदलना चाहता हूं वास्तविक समय में, में , जैसे कि खुश पृष्ठभूमि को एक खेल चरित्र के चारों ओर एक त्रिज्या में दिखाया गया है।

खुशी का एक बल , यदि आप करेंगे।

कस्टम दृश्य में कैनवास को प्रस्तुत करने के दौरान यह यथासंभव यथासंभव कैसे किया जा सकता है?

---

अद्यतन: यहाँ है कि यह मेरे सिर में कैसे काम करता है:

    private int hModeX, hModeY;
    private float hModeRadius = 0.1f;
    private float hModeStart = 0;
    happyModeBg = Bitmap.createScaledBitmap(happyModeBg, getWidth(),getHeight(), true);
    hModeX = getWidth()/2;
    hModeY = getHeight()/2;

private void initHappyMode(Canvas canvas){
    hModeRadius = 75 * thread.getDelta();

    if(hModeRadius > 500) {
        hModeStart = timestep; //What is timestep?
    }

    //context.arc(x, y, radius, 0, 2 * Math.PI, false); <- your version
    canvas.save();
    canvas.drawArc(oval, startAngle, sweepAngle, useCenter, paint) // <- my version
    //context.clip(); <- dont know what this does or if there is an equivilant
    canvas.drawBitmap(happyModeBg, 0, 0, null);
    canvas.restore();
    //requestAnimationFrame(step); <- dont know what this does since I cant seem to find it for android

}

मैं canvas.drawArc()एक सर्कल बनाने के लिए उपयोग कर रहा हूं , लेकिन मैं निश्चित रूप से कुछ याद कर रहा हूं।

Comments

तकनीकी रूप से इसे वर्ल्ड हीलिंग वेव

— शाफ़्ट फ्रीक

मैं सिर्फ 60fps पर अपने गेम-लूप द्वारा चलाए जा रहे कस्टम व्यू पर कैनवस का उपयोग करता हूं

— Green_qaue

क्या आप दृश्य को दो बार प्रस्तुत कर सकते हैं? एक बार चंगा संस्करण के लिए, एक बार मृत संस्करण के लिए, और फिर मर को पूरी तरह से बढ़ते सर्कल में मृत पर चंगा ड्रा करें जब तक कि सर्कल पूरी स्क्रीन को कवर न कर दे।

— वोल्फगैंग स्काइलर

मैं जैसा सोच रहा हूं, वैसा ही। बस पता नहीं कैसे एक बिटमैप के साथ उस के बारे में जाने के लिए। और मुझे लगता है कि वहाँ एक बेहतर तरीका है क्योंकि एक बार में 2 bgs देने से बहुत महंगा है

— Green_qaue

मुझे लगता है कि मैं देखता हूं कि भ्रम की स्थिति क्या थी - एंड्रॉइड Canvasचीजों को HTML की तुलना में थोड़ा अलग करता है <canvas>, जो मुझे लगा कि आपका मतलब है! मैंने अपने उत्तर को यह समझाने के लिए संपादित किया है कि कुछ एंड्रॉइड-विशिष्ट लिंक और उदाहरण कोड के साथ सामान्य रूप से क्लिपिंग कैसे काम करती है।

— अंको

Answer 1

डेमो

^{Gamedev मेटा : Henshin मुख्य !! : डी}

कोड एक canvas clipक्षेत्र और requestAnimationFrameअधिकतम गुणवत्ता और दक्षता के लिए उपयोग करता है । (यह बेहतर लाइव है ।)

मैंने मान लिया कि आपका मतलब HTML है canvas! यहां तक ​​कि अगर आपने नहीं किया, तो अन्य रेंडरिंग इंजन (जैसे कि एंड्रॉइड की 2 डी रेंडरिंग पाइपलाइन, जिसका आपका मतलब हो सकता है) हार्डवेयर-त्वरित क्लिप का भी समर्थन करता है क्षेत्रों का हैं। कोड संभवतः समान दिखाई देगा।

requestAnimationFrameइंजन टाइमिंग को निर्धारित करने की अनुमति देकर उच्च गुणवत्ता वाले एनीमेशन में (या किसी अन्य प्लेटफ़ॉर्म के प्रदान किए गए समाधान) के साथ एनीमेशन फ़्रेम का अनुरोध करना ।

यह कम-रेंज नेटबुक और मेरे एंड्रॉइड फोन पर आसानी से प्रस्तुत करता है।

व्याख्या

इसे और अधिक उपयोगी बनाने के लिए, आइए वास्तव में क्लिपिंग को समझें ।

मान लें कि हमारे पास ये दो आयत हैं:

क्लिपिंग बस लाइनों, बिंदुओं, छवियों या कुछ और पर काम करती है जिसे आप प्रस्तुत करना चाहते हैं। मैं सिर्फ सादगी के लिए आयतों से चिपका हूँ।

हम नहीं चाहते कि लाल आयत यहाँ (काला घेरा) बिल्कुल दिखाई दे।

तो हम रेंडरर को उस सर्कल द्वारा लाल आयत को क्लिप करने का निर्देश दे सकते हैं ।

दूसरे शब्दों में, जब लाल आयत खींची जाती है, तो वह हर जगह खींची जाती है, सिवाय इसके कि जहां काला घेरा होता।

विभिन्न रेंडरर्स यह निर्दिष्ट करने के विभिन्न तरीके हैं कि किस क्षेत्र को क्लिप करना है। HTML में <canvas>, HTML के साथ , मैंने अनिवार्य रूप से किया

// Draw the blue rectangle

context.save(); // Save the current state of the graphics context,
                // so we can go back to it.

// Draw the black circle
context.clip(); // Tell the renderer that was our clip region,
                // since the last `context.save()`.

// Draw the red rectangle.
// It will appear clipped by the black circle.

context.restore(); // Tell the renderer we should restore all
                   // the clipping settings back to what they were
                   // `context.save`d as.

// From here on, nothing is clipped anymore.

अब, एंड्रॉइड में Canvas, आप एक समान काम करना चाहते हैं, लेकिन रेंडरर थोड़ा अलग कोड की उम्मीद करता है:

// Draw the blue rectangle

canvas.save(); // Same idea as above -- just setting a point we can
               // restore to later.

// Now, `canvas.clipPath` expects a `Path` object.
// Let's create one that contains a circle.
Path path = new Path();
path.addCircle(100, 100, 100, Direction.CW); 
canvas.clipPath(path);

// Draw the red rectangle
// It will be clipped by the circle defined in the `path` that we
// used as the `clipPath`.

canvas.restore(); // Aaaand restore the state.

// Things drawn here won't be clipped anymore.

इस मामले में Android प्रलेखन आसान हो सकता है। इस तरह के स्टैकऑवरफ्लो पर अच्छे सवाल हैं, और अधिक चीजें जिनके साथ आप इसके साथ प्रयास करना चाहते हैं।

Answer 2

Ankos विधि का उपयोग कर कार्य कार्यान्वयन:

canvas.drawBitmap(depressingBg, 0, 0, null);
canvas.save();
radius += 400*thread.getDelta(); // expansion speed
Path path = new Path();
// draw around player position
path.addCircle(player.x, player.y, radius, Direction.CW);
canvas.clipPath(path);
canvas.drawBitmap(happyBg, 0, 0, null);
canvas.restore();

सभी की मदद के लिए धन्यवाद Anko!