मैं एक साधारण खेल के लिए पृष्ठभूमि के रूप में हजारों चमकते सितारों के साथ एक रात का आकाश बनाने की कोशिश कर रहा हूं, लेकिन मुझे बहुत सारी प्रदर्शन समस्याएं मिल रही हैं। मैं इसे एक द्रव 60fps पर स्थानांतरित करने के लिए प्राप्त करना चाहता हूं लेकिन मैं इससे बहुत दूर हूं।

सबसे पहले मैं एक svg कंटेनर का उपयोग करने के बावजूद। यह जो मैंने किया है:

<html>
    <head>
         <meta charset="utf-8"/>
         <style>
             @keyframes star_blink {
                 100% {opacity: 0;}
             }
         </style>
    </head>
    <body>
        <svg id="canvas" width="1000" height="1000" style="background:black" />
        <script>

        const svgns = "http://www.w3.org/2000/svg";

        var svg = document.getElementById("canvas");

        var create_star = () => {
            var star_element = document.createElementNS(svgns, "rect");
            star_element.setAttributeNS(null, "width", Math.random() < 0.85 ? 1 : 2);
            star_element.setAttributeNS(null, "height", Math.random() < 0.85 ? 1 : 2);
            star_element.setAttributeNS(null, "x", Math.random() * 1000);
            star_element.setAttributeNS(null, "y", Math.random() * 1000);
            var max_opacity = Math.random() * 0.8;
            var min_opacity = Math.random() * max_opacity;
            var transition_time = Math.random() * 10;
            while (transition_time < 0.5) {transition_time = Math.random() * 10;}
            star_element.setAttributeNS(null, "style", "stroke:white; fill:white; opacity: " + max_opacity + "; animation: star_blink " + transition_time + "s infinite alternate;");
            svg.appendChild(star_element)
        }

        for (var i=0; i<10000; i++) {
            create_star();
        }

        </script>

    </body>
</html>

प्रदर्शन वास्तव में खराब है, मुझे लगभग 20fps मिल रहा है, इसलिए स्वीकार्य नहीं है कि मैं इसके ऊपर और अधिक वस्तुओं को जोड़ना चाहता हूं।

तब मैंने फेजरज का उपयोग करने के बारे में सोचा:

<html>
    <head>
         <meta charset="utf-8"/>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/phaser-ce/2.11.1/phaser.js"></script>
         <script>
            var game = new Phaser.Game(1000, 1000, Phaser.WEBGL, 'phaser-example', { create: create, update: update });

            var stars = [];
            var planets = [];

            function random_rectangle_size() {
                var dice = Math.random();
                return dice < 0.7 ? 1 : dice < 0.9 ? 2 : dice < 0.98 ? 3 : 4;
            }

            class Star {
                constructor() {
                    this.blinking_time = Math.random() * 3000;
                    while(this.blinking_time < 500) {this.blinking_time = Math.random() * 3000}
                    this.posX = Math.random() * 1000
                    this.posY = Math.random() * 1000
                    this.graphics = game.add.graphics(this.posX, this.posY);
                    this.graphics.beginFill(0xFFFFFF, (Math.random() * 0.8 + 0.2) * 0.8);
                    this.graphics.drawRect(0, 0, random_rectangle_size(), random_rectangle_size());
                    this.graphics.endFill();

                    game.add.tween(this.graphics).to({alpha: Math.random() * 0.4}, this.blinking_time, Phaser.Easing.Linear.None, true, 0, -1, true)

                }
            }


            function create() {
                 for(var i=0; i<10000; i++) {
                     stars.push(new Star())
                 }
            }

            function update() {}

         </script>
    </head>
    <body>
    </body>
</html>

मुझे वहां लगभग 30fps मिलता है। थोड़ा बेहतर लेकिन अभी भी अपने उद्देश्य से बहुत दूर।

क्या मैं जो चाहता हूं वह करना असंभव है? मैं यहां प्रदर्शन कैसे सुधार सकता हूं? क्या मुझे जावास्क्रिप्ट और ब्राउज़र का उपयोग करने और पारंपरिक गेम इंजन का उपयोग करने का विचार छोड़ देना चाहिए?

1
Enuff 6 अक्टूबर 2018, 12:40

1 उत्तर

सबसे बढ़िया उत्तर

भविष्य के पाठकों के लिए उपरोक्त टिप्पणियों में उल्लिखित उत्तर पोस्ट करना।

फेजर v3 में v2 की तुलना में एक कस्टम रेंडरर है जो Pixi पर बनाया गया है। संस्करण 3.12 के अनुसार ग्राफिक्स के लिए रेंडर पाइपलाइन को ओवरहाल किया गया था ताकि यह तेज हो, और ग्राफिक्स को प्रस्तुत करते समय अधिक कुशल हो, दोनों व्यक्तिगत रूप से, और जब रेंडरिंग स्प्राइट्स के साथ मिश्रित हो। फेजर v3.12 और फेजर वर्ल्ड के लिए चैंजलॉग में विवरण पाया जा सकता है अंक 124

उदाहरण पेज यहां

2
Fabadiculous 9 अक्टूबर 2018, 11:17