Enviar pesquisa
Carregar
component based html5 game engine
•
Transferir como PPTX, PDF
•
0 gostou
•
713 visualizações
hbbalfred
Seguir
介绍Entity/Component游戏框架for html5 by @原木博皞(http://weibo.com/boisgames)
Leia menos
Leia mais
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 31
Baixar agora
Recomendados
Unity遊戲程式設計(05) 2D移動與碰撞處理II
Unity遊戲程式設計(05) 2D移動與碰撞處理II
吳錫修 (ShyiShiou Wu)
Game development and unity practice
Game development and unity practice
gltop
Unity遊戲程式設計(04) 2D運動與碰撞處理I
Unity遊戲程式設計(04) 2D運動與碰撞處理I
吳錫修 (ShyiShiou Wu)
Unity脚本入门
Unity脚本入门
seenen
Unity遊戲程式設計 - 2D移動與碰撞處理II
Unity遊戲程式設計 - 2D移動與碰撞處理II
吳錫修 (ShyiShiou Wu)
Unity遊戲設計- Unity基礎指引
Unity遊戲設計- Unity基礎指引
吳錫修 (ShyiShiou Wu)
Unity遊戲設計- 應用Sprite物件
Unity遊戲設計- 應用Sprite物件
吳錫修 (ShyiShiou Wu)
Roll a ball遊戲專案
Roll a ball遊戲專案
吳錫修 (ShyiShiou Wu)
Recomendados
Unity遊戲程式設計(05) 2D移動與碰撞處理II
Unity遊戲程式設計(05) 2D移動與碰撞處理II
吳錫修 (ShyiShiou Wu)
Game development and unity practice
Game development and unity practice
gltop
Unity遊戲程式設計(04) 2D運動與碰撞處理I
Unity遊戲程式設計(04) 2D運動與碰撞處理I
吳錫修 (ShyiShiou Wu)
Unity脚本入门
Unity脚本入门
seenen
Unity遊戲程式設計 - 2D移動與碰撞處理II
Unity遊戲程式設計 - 2D移動與碰撞處理II
吳錫修 (ShyiShiou Wu)
Unity遊戲設計- Unity基礎指引
Unity遊戲設計- Unity基礎指引
吳錫修 (ShyiShiou Wu)
Unity遊戲設計- 應用Sprite物件
Unity遊戲設計- 應用Sprite物件
吳錫修 (ShyiShiou Wu)
Roll a ball遊戲專案
Roll a ball遊戲專案
吳錫修 (ShyiShiou Wu)
Vuforia AR影片程式設計
Vuforia AR影片程式設計
吳錫修 (ShyiShiou Wu)
Unity遊戲程式設計(03) 2D動畫製作及應用
Unity遊戲程式設計(03) 2D動畫製作及應用
吳錫修 (ShyiShiou Wu)
Unity遊戲程式設計(09) 3D物件與光源設定
Unity遊戲程式設計(09) 3D物件與光源設定
吳錫修 (ShyiShiou Wu)
Unity遊戲程式設計(01) Unity簡介
Unity遊戲程式設計(01) Unity簡介
吳錫修 (ShyiShiou Wu)
Vuforia AR同時追踨多張辨識圖
Vuforia AR同時追踨多張辨識圖
吳錫修 (ShyiShiou Wu)
Neural Turing Machine Tutorial
Neural Turing Machine Tutorial
Mark Chang
Unity遊戲程式設計 - 2D移動與碰撞處理II
Unity遊戲程式設計 - 2D移動與碰撞處理II
吳錫修 (ShyiShiou Wu)
Unity遊戲程式設計 - 2D 物理關節應用
Unity遊戲程式設計 - 2D 物理關節應用
吳錫修 (ShyiShiou Wu)
Unity遊戲程式設計 - 2D粒子特效應用
Unity遊戲程式設計 - 2D粒子特效應用
吳錫修 (ShyiShiou Wu)
NTC_Tensor flow 深度學習快速上手班_Part2 -深度學習
NTC_Tensor flow 深度學習快速上手班_Part2 -深度學習
NTC.im(Notch Training Center)
Unity遊戲程式設計 - 應用Sprite物件
Unity遊戲程式設計 - 應用Sprite物件
吳錫修 (ShyiShiou Wu)
Behind Tetris5
Behind Tetris5
Junwen Sun
Api Code Pack For Net Framework
Api Code Pack For Net Framework
Chui-Wen Chiu
Chinese hans
Chinese hans
gr0Jmmd7Q_qarobo gr0Jmmd7Q_qarobo
Chinese hans
Chinese hans
firstnameEQBg0ks1W lastnameEQBg0ks1W
Chinese hans
Chinese hans
firstnamefgA7dbVGT lastnamefgA7dbVGT
testing leads fix for ppt2
testing leads fix for ppt2
dummyuser1analytics
XNA遊戲程式框架
XNA遊戲程式框架
吳錫修 (ShyiShiou Wu)
Unity遊戲程式設計- Unity基礎指引
Unity遊戲程式設計- Unity基礎指引
吳錫修 (ShyiShiou Wu)
Hxhsm——取代mvc的状态机框架
Hxhsm——取代mvc的状态机框架
Tencent
Actionscript遊戲元素
Actionscript遊戲元素
智傑 楊
GAE/J 簡介
GAE/J 簡介
Cloud Tu
Mais conteúdo relacionado
Mais procurados
Vuforia AR影片程式設計
Vuforia AR影片程式設計
吳錫修 (ShyiShiou Wu)
Unity遊戲程式設計(03) 2D動畫製作及應用
Unity遊戲程式設計(03) 2D動畫製作及應用
吳錫修 (ShyiShiou Wu)
Unity遊戲程式設計(09) 3D物件與光源設定
Unity遊戲程式設計(09) 3D物件與光源設定
吳錫修 (ShyiShiou Wu)
Unity遊戲程式設計(01) Unity簡介
Unity遊戲程式設計(01) Unity簡介
吳錫修 (ShyiShiou Wu)
Vuforia AR同時追踨多張辨識圖
Vuforia AR同時追踨多張辨識圖
吳錫修 (ShyiShiou Wu)
Neural Turing Machine Tutorial
Neural Turing Machine Tutorial
Mark Chang
Unity遊戲程式設計 - 2D移動與碰撞處理II
Unity遊戲程式設計 - 2D移動與碰撞處理II
吳錫修 (ShyiShiou Wu)
Unity遊戲程式設計 - 2D 物理關節應用
Unity遊戲程式設計 - 2D 物理關節應用
吳錫修 (ShyiShiou Wu)
Unity遊戲程式設計 - 2D粒子特效應用
Unity遊戲程式設計 - 2D粒子特效應用
吳錫修 (ShyiShiou Wu)
NTC_Tensor flow 深度學習快速上手班_Part2 -深度學習
NTC_Tensor flow 深度學習快速上手班_Part2 -深度學習
NTC.im(Notch Training Center)
Unity遊戲程式設計 - 應用Sprite物件
Unity遊戲程式設計 - 應用Sprite物件
吳錫修 (ShyiShiou Wu)
Behind Tetris5
Behind Tetris5
Junwen Sun
Api Code Pack For Net Framework
Api Code Pack For Net Framework
Chui-Wen Chiu
Mais procurados
(13)
Vuforia AR影片程式設計
Vuforia AR影片程式設計
Unity遊戲程式設計(03) 2D動畫製作及應用
Unity遊戲程式設計(03) 2D動畫製作及應用
Unity遊戲程式設計(09) 3D物件與光源設定
Unity遊戲程式設計(09) 3D物件與光源設定
Unity遊戲程式設計(01) Unity簡介
Unity遊戲程式設計(01) Unity簡介
Vuforia AR同時追踨多張辨識圖
Vuforia AR同時追踨多張辨識圖
Neural Turing Machine Tutorial
Neural Turing Machine Tutorial
Unity遊戲程式設計 - 2D移動與碰撞處理II
Unity遊戲程式設計 - 2D移動與碰撞處理II
Unity遊戲程式設計 - 2D 物理關節應用
Unity遊戲程式設計 - 2D 物理關節應用
Unity遊戲程式設計 - 2D粒子特效應用
Unity遊戲程式設計 - 2D粒子特效應用
NTC_Tensor flow 深度學習快速上手班_Part2 -深度學習
NTC_Tensor flow 深度學習快速上手班_Part2 -深度學習
Unity遊戲程式設計 - 應用Sprite物件
Unity遊戲程式設計 - 應用Sprite物件
Behind Tetris5
Behind Tetris5
Api Code Pack For Net Framework
Api Code Pack For Net Framework
Semelhante a component based html5 game engine
Chinese hans
Chinese hans
gr0Jmmd7Q_qarobo gr0Jmmd7Q_qarobo
Chinese hans
Chinese hans
firstnameEQBg0ks1W lastnameEQBg0ks1W
Chinese hans
Chinese hans
firstnamefgA7dbVGT lastnamefgA7dbVGT
testing leads fix for ppt2
testing leads fix for ppt2
dummyuser1analytics
XNA遊戲程式框架
XNA遊戲程式框架
吳錫修 (ShyiShiou Wu)
Unity遊戲程式設計- Unity基礎指引
Unity遊戲程式設計- Unity基礎指引
吳錫修 (ShyiShiou Wu)
Hxhsm——取代mvc的状态机框架
Hxhsm——取代mvc的状态机框架
Tencent
Actionscript遊戲元素
Actionscript遊戲元素
智傑 楊
GAE/J 簡介
GAE/J 簡介
Cloud Tu
Html5 canvas 游戏开发实例详解
Html5 canvas 游戏开发实例详解
believeStrong
Graphic programming in js
Graphic programming in js
jay li
我用Django做页游
我用Django做页游
yang qingchang
Unity遊戲程式設計(02) 應用2D圖片物件
Unity遊戲程式設計(02) 應用2D圖片物件
吳錫修 (ShyiShiou Wu)
张所勇:前端开发工具推荐
张所勇:前端开发工具推荐
zhangsuoyong
製作 Unity Plugin for iOS
製作 Unity Plugin for iOS
Johnny Sung
为独立工作室构建跨平台引擎
为独立工作室构建跨平台引擎
Coconut Island
Unity遊戲程式設計 - 2D動畫製作及應用
Unity遊戲程式設計 - 2D動畫製作及應用
吳錫修 (ShyiShiou Wu)
Unity遊戲設計- 2D動畫製作及應用
Unity遊戲設計- 2D動畫製作及應用
吳錫修 (ShyiShiou Wu)
Kissy editor开发与设计
Kissy editor开发与设计
yiming he
使用Javascript及HTML5打造協同運作系統
使用Javascript及HTML5打造協同運作系統
Hsu Ping Feng
Semelhante a component based html5 game engine
(20)
Chinese hans
Chinese hans
Chinese hans
Chinese hans
Chinese hans
Chinese hans
testing leads fix for ppt2
testing leads fix for ppt2
XNA遊戲程式框架
XNA遊戲程式框架
Unity遊戲程式設計- Unity基礎指引
Unity遊戲程式設計- Unity基礎指引
Hxhsm——取代mvc的状态机框架
Hxhsm——取代mvc的状态机框架
Actionscript遊戲元素
Actionscript遊戲元素
GAE/J 簡介
GAE/J 簡介
Html5 canvas 游戏开发实例详解
Html5 canvas 游戏开发实例详解
Graphic programming in js
Graphic programming in js
我用Django做页游
我用Django做页游
Unity遊戲程式設計(02) 應用2D圖片物件
Unity遊戲程式設計(02) 應用2D圖片物件
张所勇:前端开发工具推荐
张所勇:前端开发工具推荐
製作 Unity Plugin for iOS
製作 Unity Plugin for iOS
为独立工作室构建跨平台引擎
为独立工作室构建跨平台引擎
Unity遊戲程式設計 - 2D動畫製作及應用
Unity遊戲程式設計 - 2D動畫製作及應用
Unity遊戲設計- 2D動畫製作及應用
Unity遊戲設計- 2D動畫製作及應用
Kissy editor开发与设计
Kissy editor开发与设计
使用Javascript及HTML5打造協同運作系統
使用Javascript及HTML5打造協同運作系統
component based html5 game engine
1.
运用Entity/Component架构的 游戏引擎快速开发HTML5游戏
@原木博皞
2.
About Me 唐博皞
Boyd Tang @原木博皞 Startuper/原木游戏工作室 Co-Founder 独立游戏开发者 折腾Flash/HTML5游戏 高端骨灰级游戏玩家 (高玩, 恩=-=)
3.
Outline 游戏编程的演变 –
从数据驱动的GameObject结构再 到Entity/Component架构 架构思路 - Entity/Component的实现特点 CraftyJS - HTML5中的Component Based游戏引擎 Demo/Practice – HTML5 CodeJam 48小时作品
4.
如果要做一个游戏,你会怎么写? 有一个Main函数
function main() { while(/*游戏没结束*/){ /* 在循环里写游戏更新逻辑 */ } /* 游戏结束出现游戏结果 */ } 更新逻辑是啥?一个player和一堆monster player.update(); // player需要不断更新 for( var i = 0; i< MAX_MONS; i++){ monsters[i].update(); // 怪物也是 } 那如果Player和Monster有通用的功能呢?
5.
GameObject – 经典的数据驱动结构
游戏世界中所有的物体都是 GameObject GameObject 角色,怪物,环境障碍,车 辆,子弹,摄像头,触发器, Drawable Trigger 灯光 现在在Main函数中怎么写? for( var i=0; Static Simulated i<numGameObjects; i++) gameObjects[i].update(); Player Monster GameObject是什么呢?由 数据驱动,而非代码写死
6.
如果想在GameObject结构下添加功能呢? 我要这样?
还是这样? GameObject GameObject Drawable Trigger Drawable Trigger Animated Static Simulated Static Simulated Animated Player Monster Player Monster
7.
更复杂的情况呢…
GameObject Drawable Trigger Static Simulated Physics Animated Player Monster
8.
经典GameObject结构的问题 很多功能无法单纯靠继承实现,最终的代码结构并不 是一个有向无环图 类继承导致难以轻易改变结构
功能全都向上依赖 子类的数据爆炸,大量冗余数据和方法并导致内存消 耗过大
9.
那神马是Entity/Component架构?
10.
从GameObject到GameEntity 游戏中所有的Object都是GameEntity GameEntity只是一个容器
GameEntity里含有一堆独立功能的Components Component之间的互相访问,通过GameEntity传递 Component可以实时增减,动态为GameEntity增减 功能
11.
现在的GameEntity结构 Player
Monster Props Trigger Drawable Drawable Drawable Update Update Animated Animated Update Position Position Position Physics Physics Physics
12.
Entity/Component架构的实现特点 GameEntity是一个容器,其主要功能仅仅是增减 Components
组件(Component)才是功能的携带者,组件可以有一 定依赖关系。 例如: Animated组件依赖于Drawable组件 属性(Property)是组件间互相访问的主要实现方法。 属性由特定组件具有的一系列提供setter和getter方法。 例如: Position组件提供x,y属性,Physics组件会使用到。
13.
一些关于Entity/Component的常见问题 一个GameEntity可以有多个相同的Component么?
是的,理论上是可以的。一般GameEntity的实现可以根据Component 的ClassName来进行hash,也可以通过给Component实例设置Name 进行hash。如果需要避免冲突,可以选择根据ClassName来实现。 传统的GameObject有个统一的update,GameEntity的 update呢,是一个Component嘛? 其实并不是这样的,GameEntity的update可以是interface,当 Component实现此interface后,即具备了update功能。也可以是事件 驱动下,Component监听发到GameEntity的update事件。 整个游戏世界中GameEntity是全都是同级的么? GameEntity的实现时,可以增加GameEntityGroup的实现()。这样就 可以对其进行分组管理。
14.
使用Entity/Component架构的游戏引擎 大型3D游戏引擎 –
Unity 大家应该都知道这名字吧=-= Flash游戏引擎 – PushButton 推荐PBE2,比PBE1轻量很多 HTML5游戏引擎 – CraftyJS 本期的重点介绍 Github上可搜到
15.
Crafty – 用JS将灱活发挥到极致
轻量的体积:14.5KB (Minified&Gzipped) 类似JQuery的选择器用于GameEntity的选择 同时支持Canvas或者DOM进行渲染 (不用Canvas渲染连IE6都能跑!) 事件驱动,有非常好用的Event系统 支持SpriteSheet,碰撞检测,声音等
16.
Crafty的选择器 通过查询Component来进行选择
Crafty(“mycomp”); Crafty(“hello 2D mycomp”); Crafty(“hello, 2D, mycomp”); 第一个返回全部具有mycomp组件的GameEntity 第二个返回全部同时具有hello, 2D和mycomp组件的 GameEntity (AND操作) 第三个返回至少有这些组件之一的全部GameEntity (OR操作)
17.
Crafty的基本使用 创建GameEntity
var player = Crafty.e(); 为GameEntity添加Component player.addComponent(“2D, DOM”) //添加2D组件,使用DOM 渲染 也可以在创建GameEntity时添加 Crafty.e(“2D, DOM”); 为GameEntity设置属性 player.attr({ x:5, y:5, w:100, h:100}); //当具有2D组件时, GameEntity即拥有了x,y,w,h等属性 级联操作 player.addComponent(“2D, color”) .color(“red”).attr({ w:100, h:100});
18.
自定义你的Compoent 使用Crafty.c()方法进行自定义
Crafty.c(“mycomp”, { //为自定义组件命名 init: function() { //init函数在被组建被添加时调用 // 自定义组件函数中的this,均指向所属的Entity this.requires(“2D, Color”); //requires方法可指定依赖组件 this.w = 32; this.h = 32; this.color(“red”); //也可以这样写: this.attr({w:32, h:32 }).color(“red”); }, myfunc: function() { /*我的方法实现*/ } })
19.
Crafty的事件系统 通常事件会在自定义组件的init中绑定
Init: function() { this.requires(“2D, DOM, Mouse”); //可以使用bind方法绑定事件 this.bind(“Enterframe”, function(e){ //Enterframe可任意监听 … // 即update 函数 }); this.bind(“Click”, function(e){ //当添加Mouse组件后可用 …// 当鼠标点击Entity时的处理函数 }) } 事件触发: this.trigger(“event”,data);
20.
属性与Setter方法、Change事件 属性获取、更改(若无setter, 首次使用即定义)
attr(name, value)或者attr({name:value})均更改属性 attr(name) 可获取属性 针对特定属性的处理:setter Crafty.c(“mycomp”, { _hp: 100, init: function() { this.setter(“hp”, function(v){ this._hp = v; /*一些判断 */}); } }); 针对全部属性改变的事件:Change this.bind(“Change”, function(){ /*一些判断*/ })
21.
Crafty中的关卡场景定义 关卡场景定义
Crafty.scene(“sceneName”, function(){ …//执行一些函数,创建一堆Entity,设置背景,bhla bhla… }); 关卡场景调用 Crafty.scene(“sceneName”); // =_____= 没啥好说的… 关卡场景切换时发生了啥? 开始某关卡时,Stage当前所有具有2D组件的Entity都会被销毁 若希望保留某些Entity,给它添加Persist组件即可 关卡切换时SceneChange事件将触发
22.
引擎的启动与停止 Crafty.init([width, height]);
长宽默认是全屏 引擎init后,将持续触发Enterframe事件, 即为游戏提供update。 引擎启动瞬间,将触发Load事件 Crafty.stop(); 当引擎停止后将移除Enterframe事件的setInterval 同时也将移除全部在Stage中的元素
23.
使用SpriteSheet 使用Crafty.sprite函数创建Sprite组件
Crafty.sprite(16, 16, “spirte.png”, { // 定义每格长宽 grass1:[0,0], // 将此SpriteSheet的0,0格位置定义为grass1 grass2:[1,0], // 同上定义1, 0格为grass2 grass3:[2,0], grass4:[3,0], flower:[0,1], // flower定义在0,1格 bush:[0,2], player:[0,3], // 玩家定义在0, 3格位置 }); 定义Sprite组件后,创建GameEntity Crafty.e(“2D, DOM, flower”); //此时组件已定义,将渲染0,1 格的flower
24.
使用Sprite动画 添加SpriteAnimation组件即可使用Sprite动画
var player = Crafty.e(“2D, DOM, player, SpriteAnimation”) .attr({ x:100, y: 100}) .animate(“left”, 6, 3, 8) // 定义left为x:6, y:3格开始到x:8格 .animate(“right”, 9, 3, 11)// 同上 .animate(“up”, 3, 3, 5) .animate(“down”, 0, 3, 2); 播放动画 player.animate(“left”, 10); // 在10帧时间内播放left动画 其他函数 stop(), reset(), isPlaying(name)
25.
Crafty中的碰撞检测 基于Crafty.Polygon或者Crafty.Circle的碰撞检测 添加Collision组件后即可使用
var player = Crafty.e(“2D, DOM, player, Collision”) .collision() //默认创建基于x,y,w,h的Polygon用于检测 .onHit(“flower”, function(){ …// 进行一些处理 }); onHit方法是自动对具有某个Component进行检测 当与具有该组件的GameEntity碰撞时即调用注册的函数 也可以直接调用hit(compName)检测 此方法返回Boolean
26.
Crafty中的键盘操控 基本组件:Keyboard组件
函数:isDown(key) //可以在Crafty.keys中找到映射 事件触发:KeyDown,KeyUp 高级组件:Multiway组件(依赖Keyboard) 函数:multiway([speed], {W: -90, S:90, D:0, A:180} ); 事件触发:NewDirection(方向切换时), Moved(发生移动时) 便捷组件:Fourway, Twoway (依赖Multiway) fourway // wasd四方向控制 twoway // ad 双方向,w跳可在Gravity组件中使用
27.
Crafty中的鼠标操控 基本组件: Mouse
组件 函数:areaMap(polygon) //传入一个Crafy.Polygon作为检测区 事件触发: MouseOver, MouseOut, MouseUp, MouseDown, Click 高级组件:Draggable组件(依赖Mouse组件) 函数: startDrag, stopDrag, enableDrag, disableDrag 事件触发: StartDrag, StopDrag 对于移动平台的Touch,同样使用Mouse组件 暂无对MultiTouch的支持
28.
资源预加载与音频播放 资源预加载与音频分别需要Image和Audio的支持 使用Crafty.load进行资源预加载
Crafy.load([/*资源url列表*/], onComplete, onProgress, onError); 预加载可以先定义一个loading的scene,进入并进行Crafy.load。 在onComplete函数中切换到main scene 音频的命名和播放 命名:Crafty.audio.add(id, urls); //urls传入多种格式,播放时 引擎会选择其中一个兼容的格式 播放:Crafty.audio.play(id);
29.
Crafy与其他JS框架相结合进行游戏开发 Crafty在创建Stage时会查找id为cr-stage的div Crafty引擎擅长处理具有游戏性GameEntity
UI并不是Crafy擅长的,可以选择其他框架 当然使用DOM组件处理UI也是可以的。 为其他JS框架定义Component以传递数据 对中文的处理最好使用DOM
30.
一些Crafty的Demo和Practice 官方的Demo
RPG Isometric Asteroids Connect4 FruitAssassion HTML5 CodeJam上的Practice 杀戮者
31.
Q&A 屏幕底下的一行小字=-= 谢谢大家听我扯了这么久!
Baixar agora