atitit ui引擎之道 游戏引擎之道.docx 1. 概念 2 1.1. (cocos,createjs,dom) 2 2. 游戏引擎的构成（图形引擎（渲染系统）,控件部件系统,事件系统 ,布局

atitit ui引擎之道 游戏引擎之道.docx

 

1. 概念 2

1.1. (cocos,createjs,dom) 2

2. 游戏引擎的构成（图形引擎（渲染系统）,控件部件系统,事件系统 ,布局系统 ,动画系统,粒子系统（烟雾）,物理系统（重力，碰撞） 2

3. 游戏引擎与gui引擎的区别（主要在重力，粒子系统） 2

4. Ui界面与游戏常用sdk api 3

4.1. 添加sprite 3

4.2. 添加sprite控件(cocos,createjs,dom) 3

4.2.1. Cocos 3

4.2.2. createjs 3

4.2.3. Dom模式 3

5. 动画移动原理与api 4

5.1. 动画移动的实现原理 设置时间位置 vs 每真处理 4

5.2. 动画移动(cocos2d-js,jquery animate,create.js) 4

5.3. ---code 5

6. 参考资料 8

6.1. Atitit 基于dom的游戏引擎.docx 8

6.2. 8

6.3. 最火HTML5 JavaScript游戏引擎：国外篇（一）-CSDN.NET.html 8

6.4. 我的js游戏小引擎—— 谈谈 基于dom VS 基于canvas - 真阿当 - 博客园.html 8

6.5. atitit.跨平台gui 概览 - attilax的专栏 - 博客频道 - CSDN.NET.html 8

6.6. Atiti.ui原理与gui理论 - attilax的专栏 - 博客频道 - CSDN.NET.html 8

6.7. Atitit.现在的常用gui技术与gui技术趋势评价总结 - attilax的专栏 - 博客频道 - CSDN.NET.html 8

6.8. Atitit .如何开发游戏引擎以及ide工具链.docx 8

6.9. Atitit .如何开发游戏引擎以及ide工具链.docx.txt 8

6.10. Atitit cocos2d 游戏引擎 与jQuery dom游戏引擎的 dsl api统一化工作.docx 8

6.11. Atitit cocos2d 游戏引擎 与jQuery dom游戏引擎的 dsl api统一化工作.docx.txt 9

6.12. Atitit Dom界面动画引擎以及游戏引擎，特别适合于给界面ui增加动态效果，以及在游戏中的应用.docx 9

6.13. Atitit Dom界面动画引擎以及游戏引擎，特别适合于给界面ui增加动态效果，以及在游戏中的应用.docx.txt 9

6.14. Atitit gc资源释放器死锁解除器 适合于游戏引擎，数据库释放 爬虫网络连接释放等.docx 9

6.15. Atitit gc资源释放器死锁解除器 适合于游戏引擎，数据库释放 爬虫网络连接释放等.docx.txt 9

6.16. Atitit 基于dom的游戏引擎.docx 9

6.17. Atitit 基于dom的游戏引擎.docx.txt 9

6.18. Atitit 游戏引擎---物理系统------爆炸效果.docx 9

6.19. Atitit 游戏引擎---物理系统------爆炸效果.docx.txt 9

6.20. Atitit 游戏引擎---物理系统解决方案.docx 9

6.21. Atitit 游戏引擎---物理系统解决方案.docx.txt 9

6.22. Atitit 游戏引擎---物理系统（1)------爆炸效果 v2 qag.docx 10

6.23. Atitit 游戏引擎---物理系统（1)------爆炸效果 v2 qag.docx.txt 10

6.24. Atitit 游戏的游戏移动，，以及不定时的出现多个使用定时器cocos2d-js  与jquery ui dom游戏引擎分别的实现.docx 10

6.25. Atitit 游戏的游戏移动，，以及不定时的出现多个使用定时器cocos2d-js  与jquery ui dom游戏引擎分别的实现.docx.txt 10

6.26. Atitit.如何开发游戏引擎的原理与概念.docx 10

6.27. Atitit.如何开发游戏引擎的原理与概念.docx.txt 10

6.28. Atitit。游戏引擎调查.docx 10

6.29. Atitit。游戏引擎调查.docx.txt 10

6.30. Atitti 游戏引擎的选择dom vs  canvas vs cocos.docx 10

6.31. Atitti 游戏引擎的选择dom vs  canvas vs cocos.docx.txt 10

6.32. game.txt 11

 

1. 概念

1.1. (cocos,createjs,dom)

2. 游戏引擎的构成（图形引擎（渲染系统）,控件部件系统,事件系统 ,布局系统 ,动画系统,粒子系统（烟雾）,物理系统（重力，碰撞）

 

 

3. 游戏引擎与gui引擎的区别（主要在重力，粒子系统）

 

 

4. Ui界面与游戏常用sdk api

4.1. 添加sprite

 

4.2. 添加sprite控件(cocos,createjs,dom)

 

4.2.1. Cocos

// var sushi = new cc.Sprite(res.Sushi_png);

 var sushi = new SushiSprite(res.Sushi_png);

        var size = cc.winSize;

 

        var x = sushi.width/2+size.width/2*cc.random0To1();

        sushi.attr({

            x: x,

            y:size.height - 30

        });

 

        this.addChild(sushi,5);

 

4.2.2. createjs

    var man = new createjs.Bitmap("../res/grossini.png");

 

  stage.addChild(man);

 

 

4.2.3. Dom模式

var imgStr='';

 //imgStr=imgStr.replace("@w@",rdmWid);

imgStr=imgStr.replace("@cyar@",cyar);

// console.log("--imgStr:"+imgStr);

var $h1=$(imgStr);

$("body").append($h1);

 

 

5. 动画移动原理与api

 

5.1. 动画移动的实现原理 设置时间位置 vs 每真处理

Cocos与jq anim只要设置哈时间与最终的位置走ok..

Create.js还是传统的模式,每fps的事件里面儿写移动坐标..麻烦的..

5.2. 动画移动(cocos2d-js,jquery animate,create.js)

//down move

// var dorpAction = cc.MoveTo.create(4, cc.p(sushi.x,-30));

// sushi.runAction(dorpAction);

 

jquery animate

$($h1).animate({top:"800px"},10000);

 

 

createjs之小黄鸡鼠标移动效果 - 笔记 - 前端网（W3Cfuns）.html

//SpriteSheet 精灵表单

sprite = new createjs.Sprite(new createjs.SpriteSheet(data));

createjs.Ticker.setFPS(20);

createjs.Ticker.addEventListener("tick",tick);

}

function tick(e){

var t = stage.getNumChildren(); //获取舞台下面的数量

for ( var i=t-1; i>0 ; i-- ) {

var s = stage.getChildAt(i);

s.vX += 1;

s.vY += 2;

s.x += s.vX;

s.y += s.vY;

s.scaleX = s.scaleY = s.scaleX + s.vS;

s.alpha += s.vA;

 

if(s.alpha <= 0 || s.y > canvas.height ){

stage.removeChildAt(i);

}

}

stage.update(); //必须更新舞台

 

 

5.3. ---code

 

 

 

//schedule(this.update,2,16*1024,1);

   var PlayLayer={   //main layer,,one scence must hav a scence

   curCyarIdx:-1,

   cyararr:[5,20,50,100],

   schedule:function(fun,interTime,repeat,delay){

   window.setInterval(fun.bind(this),interTime*1000);

   },

    ctor:function () {

 this.addSushi();

 

  this.schedule(this.addSushi,2,16*1024,1);

},

  addSushi : function() {

   //alert(this.curCyarIdx);

  

   this.curCyarIdx++;

if(this.curCyarIdx>3)

this.curCyarIdx=0;

var cyar=this.cyararr[this.curCyarIdx];

  

var docWid=$(document.body).width();

console.log("--docWid wid:"+docWid);

 

var imgStr='';

 // imgStr=imgStr.replace("@w@",rdmWid);

imgStr=imgStr.replace("@cyar@",cyar);

//  console.log("--imgStr:"+imgStr);

var $h1=$(imgStr);

$("body").append($h1);

 $h1.load(function(){  

var w =  $h1.width();  

var h = $h1.height();  

var imgWid=$($h1).width();

console.log("--imgWid wid:"+imgWid);

var maxWid=docWid-imgWid;//maxWid=800;

var rdmWid= Math.floor(Math.random()*(maxWid+1));

console.log("--rdm wid:"+rdmWid);

$h1.css("left",rdmWid+"px");

} );

//   this.addChild(sushi,5);

// $(".sushi_tag_5kwi").css("top","0");

//$(".sushi_tag_5kwi")

//down move

// var dorpAction = cc.MoveTo.create(4, cc.p(sushi.x,-30));

// sushi.runAction(dorpAction);

$($h1).animate({top:"800px"},10000);

 

 

//gc

 

window.setTimeout(function(){

 $($h1).remove();

},6500);

 

 }

   

   

   };

PlayLayer.ctor();

 

 

6. 参考资料

6.1. Atitit 基于dom的游戏引擎.docx

6.2.  

6.3. 最火HTML5 JavaScript游戏引擎：国外篇（一）-CSDN.NET.html

6.4. 我的js游戏小引擎—— 谈谈 基于dom VS 基于canvas - 真阿当 - 博客园.html

6.5. atitit.跨平台gui 概览 - attilax的专栏 - 博客频道 - CSDN.NET.html

6.6. Atiti.ui原理与gui理论 - attilax的专栏 - 博客频道 - CSDN.NET.html

6.7. Atitit.现在的常用gui技术与gui技术趋势评价总结 - attilax的专栏 - 博客频道 - CSDN.NET.html

6.8. Atitit .如何开发游戏引擎以及ide工具链.docx

6.9. Atitit .如何开发游戏引擎以及ide工具链.docx.txt

6.10. Atitit cocos2d 游戏引擎 与jQuery dom游戏引擎的 dsl api统一化工作.docx

6.11. Atitit cocos2d 游戏引擎 与jQuery dom游戏引擎的 dsl api统一化工作.docx.txt

6.12. Atitit Dom界面动画引擎以及游戏引擎，特别适合于给界面ui增加动态效果，以及在游戏中的应用.docx

6.13. Atitit Dom界面动画引擎以及游戏引擎，特别适合于给界面ui增加动态效果，以及在游戏中的应用.docx.txt

6.14. Atitit gc资源释放器死锁解除器 适合于游戏引擎，数据库释放 爬虫网络连接释放等.docx

6.15. Atitit gc资源释放器死锁解除器 适合于游戏引擎，数据库释放 爬虫网络连接释放等.docx.txt

6.16. Atitit 基于dom的游戏引擎.docx

6.17. Atitit 基于dom的游戏引擎.docx.txt

6.18. Atitit 游戏引擎---物理系统------爆炸效果.docx

6.19. Atitit 游戏引擎---物理系统------爆炸效果.docx.txt

6.20. Atitit 游戏引擎---物理系统解决方案.docx

6.21. Atitit 游戏引擎---物理系统解决方案.docx.txt

6.22. Atitit 游戏引擎---物理系统（1)------爆炸效果 v2 qag.docx

6.23. Atitit 游戏引擎---物理系统（1)------爆炸效果 v2 qag.docx.txt

6.24. Atitit 游戏的游戏移动，，以及不定时的出现多个使用定时器cocos2d-js  与jquery ui dom游戏引擎分别的实现.docx

6.25. Atitit 游戏的游戏移动，，以及不定时的出现多个使用定时器cocos2d-js  与jquery ui dom游戏引擎分别的实现.docx.txt

6.26. Atitit.如何开发游戏引擎的原理与概念.docx

6.27. Atitit.如何开发游戏引擎的原理与概念.docx.txt

6.28. Atitit。游戏引擎调查.docx

6.29. Atitit。游戏引擎调查.docx.txt

6.30. Atitti 游戏引擎的选择dom vs  canvas vs cocos.docx

6.31. Atitti 游戏引擎的选择dom vs  canvas vs cocos.docx.txt

6.32. game.txt