做一个基于PIXI引擎的游戏框架

直接看代码和注释吧:

    // 简单框架思路
    // ================================================
    var iGameBase = {};

    // 定义一个全局数组,储存Game对象
    iGameBase._GameArray = [];

    // RAF 
    var _RAF = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || window.mozRequestAnimationFrame;

    // Main (循环入口函数)
    iGameBase._Main = function(){
        for (var i=0; i<iGameBase._GameArray.length; i++){
            // 调用每个Game对象的控制函数
            iGameBase._GameArray[i].controller();
        }
        _RAF(iGameBase._Main);
    }

    // 进入循环,开始运作 !!!
    _RAF(iGameBase._Main);

    // -------------------------------
    // Game对象原型
    iGameBase.Game = function(width, height){
        this.width = width ;
        this.height = height;

        // 创建关键的两个对象(舞台和渲染器)
        this.stage = new PIXI.Stage(0xFFFFFF);
        this.renderer = PIXI.autoDetectRenderer(this.width, this.height);

        // 控制函数
        this.controller = function(){
            this.renderer.render(this.stage);
            // 这里可实现preload、update等逻辑
            // ......
        }
        // 创建精灵函数
        this.addSprite = function(x, y, img){
            var sprite = new PIXI.Sprite.fromImage(img); 
            sprite.position.set(x, y); 
            sprite.game = this;    // 增加一个game属性,方便通过sprite访问Game对象
            this.stage.addChild(sprite);
            return sprite;
        };
        // 更多函数......

        iGameBase._GameArray.push(this); // 存入全局数组
        document.body.appendChild(this.renderer.view); // 加入DOM
    }
    // -------------------------------
    // ================================================

    // 下面开始制作...

    var iGame = new iGameBase.Game(640, 480);

    // 创建精灵
    var sprite = iGame.addSprite(5, 5, 'pic.png');

    // 其他的就看着PIXI的API来做了 ......

Demo演示:http://www.aleaf.com/h5/games/pixi/


续:

好吧,其实上面只是实现一个RAF循环和一个简单的Game原型,我们要做的就是new一个Game的实例,然后对这个实例进行编程就行了。 Game实例的运作流程主要靠控制函数实现,而上面只是直接把stage渲染出来而已。 下面就对控制函数进一步完善,模仿Phaser的state中init、preload、create、update等函数的执行流程; 我不知道Phaser中的执行流程具体是怎么实现的,但应该是相似的; Game原型完善如下(内部函数分离出来,用原型链的写法):

    // Game对象原型
    iGameBase.Game = function(width, height){
        this.width = width ;
        this.height = height;

        this.stage = new PIXI.Stage(0xFFFFFF);
        this.stage_preload = new PIXI.Stage(0xFFFFFF); // 增加一个preload的舞台
        this.renderer = PIXI.autoDetectRenderer(this.width, this.height);

        iGameBase._GameArray.push(this);
        document.body.appendChild(this.renderer.view);

        this._CTRLID = 0;  // 用于控制流程的ID
        this.state = {init:null,preload:null,create:null,update:null,render:null,debug:null};  // 模仿phaser的单个state对象
        this.cache = {data:null,count:0,loaded:0};  // 模拟简单的cache对象
    };
    // 控制函数(关键逻辑)
    iGameBase.Game.prototype.controller = function(){
        // 这里模仿phaser实现preload、create、update等逻辑
        if (this._CTRLID == 0){
            this._CTRLID ++;
            if(typeof this.state.init == "function"){this.state.init();}
        }else if(this._CTRLID == 1){
            this._CTRLID ++;
            if(typeof this.state.preload == "function"){this.state.preload();}
            this.renderer.render(this.stage_preload);
        }else if(this._CTRLID == 2){
            // 这里只模拟preload的效果,具体的实现另作详述...
            this.cache.loaded ++;
            if(this.cache.loaded >= this.cache.count){
                this._CTRLID ++;
            }
            this.renderer.render(this.stage_preload);
        }else if(this._CTRLID == 3){
            this._CTRLID ++;
            if(typeof this.state.create == "function"){this.state.create();}
            this.renderer.render(this.stage);
        }else if(this._CTRLID >= 4){
            if(typeof this.state.update == "function"){this.state.update();}
            this.renderer.render(this.stage);
        }
    };
    // 预加载资源函数
    iGameBase.Game.prototype.addCache = function(key, img){
        // 这里只模拟preload的效果,具体的实现另作详述...
        this.cache.count ++;
    };
    // 创建精灵函数
    iGameBase.Game.prototype.addSprite = function(x, y, key){
        // 略....
    };

Demo演示,逐渐更新中……(看完整内容,请自行扒源码)


续:

补上,创建iGame实例的代码:

    // 下面创建一个带有preload和create函数的iGame实例:

    var iGame = new iGameBase.Game(640, 480);

    // 创建iGame的preload函数
    iGame.state.preload = function(){
        // 这里只模拟preload的效果,具体的实现另作详述...
        iGame.addCache("aa","aa.png");
        iGame.addCache("bb","bb.png");
        iGame.addCache("cc","cc.png");
    };
    // 创建iGame的create函数
    iGame.state.create = function(){
        // 创建精灵
        var sprite = iGame.addSprite(5, 5, 'pic.png');

        // 更多内容略过...... 
    };