如何提高游戏性能?

时间:2013-10-08 09:44:20

标签: javascript android performance

我必须构建一个Android应用程序游戏。

以前,我尝试使用pixi.JS构建它,但它在Canvas for Android上效果不佳..

我实际上是想用CollieJS构建它,我在这里有一个简单的例子:

    <script type="text/javascript">

    var stats = new Stats();
        stats.setMode(0); // 0: fps, 1: ms

        // Align top-left
        stats.domElement.style.position = 'absolute';
        stats.domElement.style.left = '0px';
        stats.domElement.style.top = '0px';

        document.body.appendChild( stats.domElement );

        setInterval( function () {

          stats.begin();

          stats.end();

    }, 1000 / 60 );

        //Creation calque
        var layer = new collie.Layer({
            width: 1280,
            height: 700
        });

        var score = 0;
        var thisManyDb=10;
        var comboCounter=0;
        function letWinSomePoints(){
            score+=thisManyDb;
            comboCounter++;
            txt_score.text(score+"dB");
            txt_ComboCounter.text("Combo: "+comboCounter);
        };

        //Chargement de la planche
        collie.ImageManager.add({
            sprite_bassiste: "assets/img/spriteBass2.png",
            sprite_batteur: "assets/img/spriteDrummer2.png",
            sprite_guitF: "assets/img/spriteGuitF2.png",
            sprite_guitH: "assets/img/spriteGuitH.png"
        });

        //Découpage de la planche
        collie.ImageManager.addSprite(
            "sprite_bassiste", {
                normal:[0,0,187,268,3],
                normal_rose:[561,0,186,268,3],
                normal_click:[0,268,264,394,3],
                occupe:[0,662,215,283,3],
                occupe_rose:[645,662,215,283,3],
                occupe_rouge:[0,945,215,283,3],
                combo:[0,1223,277,309,3]
            }
        );
        collie.ImageManager.addSprite(
            "sprite_batteur", {
                normal:[0,0,297,297,3],
                normal_rose:[891,0,297,295,3],
                normal_click:[0,297,273,376,3],
                occupe:[819,339,356,334,3],
                occupe_rose:[0,662,356,334,3],
                occupe_rouge:[1068,662,356,334,3],
                combo:[0,1007,297,306,3]
            }
        );
        collie.ImageManager.addSprite(
            "sprite_guitF", {
                normal:[0,0,216,265,3],
                normal_rose:[648,0,216,265,3],
                normal_click:[0,265,351,372,3],
                occupe:[0,637,216,265,3],
                occupe_rose:[648,637,216,265,3],
                occupe_rouge:[0,902,216,265,3],
                combo:[0,1167,281,309,3]
            }
        );
        collie.ImageManager.addSprite(
            "sprite_guitH", {
                normal:[0,0,174,219,3],
                normal_rose:[522,0,174,279,3],
                occupe:[0,280,269,256,3],
                occupe_rose:[0,535,269,256,3],
                occupe_rouge:[0,791,269,256,3],
                normal_click:[0,1047,309,376,3],
                combo:[0,1423,283,309,3]
            }
        );

        //Creation d'un objet
        var bassiste = new collie.DisplayObject({
            width: 187,
            height: 268,
            y:0,
            x:0,
            backgroundImage: "sprite_bassiste",
            spriteSheet : "normal",
            set_normal:function(){
                bassiste.set("spriteSheet", "normal");
                bassiste._htOption.height=268;
                bassiste._htOption.width=187;
                bassiste._htOption.x=0;
                bassiste._htOption.y=0;
            },
            set_occupe:function(){
                bassiste.set("spriteSheet", "occupe");
                bassiste._htOption.height=283;
                bassiste._htOption.width=215;
                bassiste._htOption.x-15;//(-15)
                bassiste._htOption.y=2;//(+2)
            },
            set_occupe_rose:function(){
                bassiste.set("spriteSheet", "occupe_rose");
                bassiste._htOption.height=283;
                bassiste._htOption.width=215;
                bassiste._htOption.x-15;//(-15)
                bassiste._htOption.y=2;//(+2)
            },
            set_combo:function(){
                bassiste.set("spriteSheet", "combo");
                bassiste._htOption.height=309;
                bassiste._htOption.width=277;
                bassiste._htOption.x-40;//(-40)
                bassiste._htOption.y-20;//(+20)
            },
            }).attach({
                click: function (e){
                    if (bassiste.get("spriteSheet")=="normal_rose" && has_been_clicked==false) {
                        has_been_clicked=true;
                        bassiste.set("spriteSheet", "normal_click");
                        bassiste._htOption.height=394;
                        bassiste._htOption.width=264;
                        bassiste._htOption.x-=55;//(-40)
                        bassiste._htOption.y-=126;//(-126)
                        letWinSomePoints();
                        setTimeout(function(){
                            bassiste._htOption.set_normal();
                            has_been_clicked=false;
                        },500);
                    };
                }
            }).addTo(layer);
        var batteur = new collie.DisplayObject({
            x:187,
            y:0,
            width: 297,
            height: 297,
            backgroundImage: "sprite_batteur",
            spriteSheet : "normal",
            set_normal:function(){
                batteur.set("spriteSheet", "normal");
                batteur._htOption.height=297;
                batteur._htOption.width=297;
                batteur._htOption.x=187;
                batteur._htOption.y=0;
            },
            set_occupe:function(){
                batteur.set("spriteSheet", "occupe");
                batteur._htOption.height=334;
                batteur._htOption.width=356;
                batteur._htOption.x-=73;//-73
                batteur._htOption.y-=39;//-39
            },
            set_occupe_rose:function(){
                batteur.set("spriteSheet", "occupe_rose");
                batteur._htOption.height=334;
                batteur._htOption.width=356;
                batteur._htOption.x-=73;//-73
                batteur._htOption.y-=39;//-39
            },
            set_combo:function(){
                batteur.set("spriteSheet", "combo");
                batteur._htOption.height=306;
                batteur._htOption.width=297;
                batteur._htOption.x=187;//pas de modifs position
                batteur._htOption.y=0;
            },
            }).attach({
                click: function (e){
                    if (batteur.get("spriteSheet")=="normal_rose" && has_been_clicked==false) {
                        has_been_clicked=true;
                        batteur.set("spriteSheet", "normal_click");
                        batteur._htOption.height=376;
                        batteur._htOption.width=273;
                        batteur._htOption.y-=84;//-84
                        batteur._htOption.x+=16;//+16
                        letWinSomePoints();
                        setTimeout(function(){
                            batteur._htOption.set_normal();
                            has_been_clicked=false;
                        },500);
                    };
                }
            }).addTo(layer);
        var guitF = new collie.DisplayObject({
            x:187+297,
            y:0,
            width: 216,
            height: 265,
            backgroundImage: "sprite_guitF",
            spriteSheet : "normal",
            set_normal:function(){
                guitF.set("spriteSheet", "normal");
                guitF._htOption.height=265;
                guitF._htOption.width=216;
                guitF._htOption.x=187+297;
                guitF._htOption.y=0;
            },
            set_occupe:function(){
                guitF.set("spriteSheet", "occupe");
                guitF._htOption.height=265;
                guitF._htOption.width=216;
                guitF._htOption.x+=21;//+21
            },
            set_occupe_rose:function(){
                guitF.set("spriteSheet", "occupe_rose");
                guitF._htOption.height=265;
                guitF._htOption.width=216;
                guitF._htOption.x+=21;//+21
            },
            set_combo:function(){
                guitF.set("spriteSheet", "combo");
                guitF._htOption.height=309;
                guitF._htOption.width=281;
                guitF._htOption.x-=32;//+32
                guitF._htOption.y-=44;//+44
            },
            }).attach({
                click: function (e){
                    if (guitF.get("spriteSheet")=="normal_rose" && has_been_clicked==false) {
                        has_been_clicked=true;
                        guitF.set("spriteSheet", "normal_click");
                        guitF._htOption.height=372;
                        guitF._htOption.width=351;
                        guitF._htOption.y-=96;//-96
                        guitF._htOption.x-=67;//-67
                        letWinSomePoints();
                        setTimeout(function(){
                            guitF._htOption.set_normal();
                            has_been_clicked=false;
                        },500);
                    };
                }
            }).addTo(layer);
        var guitH = new collie.DisplayObject({
            x:187+297+216,
            y:0,
            width: 174,
            height: 279,
            backgroundImage: "sprite_guitH",
            spriteSheet : "normal",
            set_normal:function(){
                guitH.set("spriteSheet", "normal");
                guitH._htOption.height=279;
                guitH._htOption.width=174;
                guitH._htOption.x=187+297+216;
                guitH._htOption.y=0;
            },
            set_occupe:function(){
                guitH.set("spriteSheet", "occupe");
                guitH._htOption.height=256;
                guitH._htOption.width=269;
                guitH._htOption.x-=19;//-19
                guitH._htOption.y+=12;//+12
            },
            set_occupe_rose:function(){
                guitH.set("spriteSheet", "occupe_rose");
                guitH._htOption.height=256;
                guitH._htOption.width=269;
                guitH._htOption.x-=19;//-19
                guitH._htOption.y+=12;//+12
            },
            set_combo:function(){
                guitH.set("spriteSheet", "combo");
                guitH._htOption.height=309;
                guitH._htOption.width=283;
                guitH._htOption.x-=71;//-71
                guitH._htOption.y+=22;//+22
            },
            }).attach({
                click: function (e){
                    if (guitH.get("spriteSheet")=="normal_rose" && has_been_clicked==false) {
                        has_been_clicked=true;
                        guitH.set("spriteSheet", "normal_click");
                        guitH._htOption.y-=76;//76
                        guitH._htOption.x-=102;//102
                        guitH._htOption.height=376;
                        guitH._htOption.width=309;
                        letWinSomePoints();
                        setTimeout(function(){
                            guitH._htOption.set_normal();
                            has_been_clicked=false;
                        },500);
                    };
                }
            }).addTo(layer);
        var txt_score = new collie.Text({
            width : 100,
            height : 100,
            x : 0,
            y : 0,
            fontColor : "#000000"
        }).text(score+"dB").addTo(layer);

        var txt_DbCounter = new collie.Text({
            width : 100,
            height : 100,
            x : 100,
            y : 0,
            fontColor : "#000000"
        }).text('').addTo(layer);

        var txt_ComboCounter = new collie.Text({
            width : 100,
            height : 100,
            x : 200,
            y : 0,
            fontColor : "#000000"
        }).addTo(layer);

        //Définition de l'anim du sprite
        var timer = collie.Timer.cycle(
            bassiste, "10fps", {
            from:0,
            to:2,
            }
        );
        collie.Timer.cycle(
            batteur, "10fps", {
            from: 0,
            to: 2,
            }
        );
        collie.Timer.cycle(
            guitF, "10fps", {
            from: 0,
            to: 2,
            }
        );
        collie.Timer.cycle(
            guitH, "10fps", {
            from: 0,
            to: 2,
            }
        );

        var choosen_musician = 0;
        var busy_musican = 0;
        var trap_musician = 0;
        var has_been_clicked = false;

        // Fonction boucle intégrée dans collie
        collie.Timer.repeat(function () {
            //Pioche un musicien
            choosen_musician=Math.round(Math.random()*3);
            busy_musican  = Math.round(Math.random()*10);
            trap_musician  = Math.round(Math.random()*20);

            if (busy_musican==0 && busy_musican!=choosen_musician) {
                busy_musican=bassiste;
            } else if (busy_musican==1 && busy_musican!=choosen_musician){
                busy_musican=batteur;
            } else if (busy_musican==2 && busy_musican!=choosen_musician){
                busy_musican=guitF;
            } else if (busy_musican==3 && busy_musican!=choosen_musician){
                busy_musican=guitH;
            };

            if (choosen_musician==0) {
                choosen_musician=bassiste;
            } else if (choosen_musician==1){
                choosen_musician=batteur;
            } else if (choosen_musician==2){
                choosen_musician=guitF;
            } else if (choosen_musician==3){
                choosen_musician=guitH;
            };

            // On change son sprite, bug lorsqu'on met un sprite "fixe"
            choosen_musician.set("spriteSheet", "normal_rose");
            if (busy_musican._htOption) {busy_musican._htOption.set_occupe()};

            setTimeout(function(){
                if (has_been_clicked==false) {
                    choosen_musician._htOption.set_normal();
                    //comboCounter=0;
                };
                if (busy_musican._htOption) {busy_musican._htOption.set_normal();};
            },2000);

        }, 2500);


        //On render tout ça
        collie.Renderer.addLayer(layer);
        collie.Renderer.load(document.getElementById("container"));
        collie.Renderer.start();

    </script>

我知道这是一个很长的例子,但我需要一些帮助......

这是一个简单的动画精灵,有一些精灵切换。

实际上,我的Android平板电脑上的游戏速度为4-6 FPS,我不知道为什么......

1 个答案:

答案 0 :(得分:0)

从Android 3.0(API级别11)开始,Android 2D渲染管道支持硬件加速,这意味着在View画布上执行的所有绘图操作都使用GPU。由于启用硬件加速所需的资源增加,您的应用程序将消耗更多RAM。

在Android清单文件中,将以下属性添加到代码中,以便为整个应用程序启用硬件加速:

<application android:hardwareAccelerated="true" ...>

有关硬件加速的详细信息,请访问以下链接:Hardware Acceleration

相关问题