精华
客串一下：做一个基于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来做了 ......
5 回复
续： 也许有人会喷了：这算什么鬼！！ 好吧，其实上面只是实现一个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');
// 更多内容略过......
};
