Date post: | 28-Jun-2015 |
Category: |
Technology |
Upload: | finscn |
View: | 9,204 times |
Download: | 4 times |
聊聊HTML5 2D游戏开发Part 1
魏子钧
关于我
网名: 大城小胖
( fins/finscn )
blog: fins.javaeye.com
twitter&围脖: @finscn
多年非资深Web开发者
& 业余2D游戏开发爱好者
胖子控
游戏, 从动画开始
HTML5动画基础
致敬
你看 或不看我
我都在那里
不离不弃
你点 或不点我
我仍在那里
灰来灰去
献给那些曾伴随我们成长的
浮动小广告 ....
动画实现原理小广告流程:
绝对定位的div里塞个动画GIF
setInterval {
计算div新坐标
移动div到新坐标
(歇一会儿)
}
动画实现原理普通动画流程:
准备画布, 定义物体(一系列图片和属性)
loop {
更新物体状态
擦除原物体
绘制新物体
(歇一会儿)
}
动画实现原理
更新物体状态:
• 改变位置
直接改变 / 根据运动物理学
• 改变样子
直接换图片 / Animation
• 创建
• 销毁
动画实现原理
擦除原物体
• 清空画布
• 背景覆盖
• 脏矩形
绘制新物体
• 把图片绘制到画布上
• 把图片的一部分画到画布上
动画实现原理HTML5 Canvas API
• gc=canvas.getContext(“2d”)
• gc.clearRect(x, y, w, h)
• gc.drawImage(img,dx, dy)
• gc.drawImage(img, sx, sy, w, h,
dx, dy, w, h)
动画实现原理
DEMO
动画实现原理
闪烁 与 双缓冲
清除画布 与 绘制图片之间的间隔
这是浏览器,单线程,于是...
入个门,先HTML5游戏开发基础
游戏 == 互动动画
输入 + 逻辑 + 动画
游戏 == 互动动画
流程:
loop {
检测玩家输入
执行游戏逻辑
擦除原物体
绘制新物体
}
游戏 == 互动动画
检测玩家输入
• 与传统WebUI开发中的事件响应不同
• 利用 keyDown / keyUp 记录输入状态
• 检测状态值
!!! 上栗子 !!!
• 注意:个别按键的keyCode在不同事件/不同浏览器里存在差异(浏览器bug?)
游戏 == 互动动画
执行游戏逻辑:
• 更新物体状态
• 碰撞检测
• 更新地图/场景/环境...
• ......
游戏 == 互动动画
DEMO
游戏 == 互动动画
2D游戏的类型:
• Tile ( Orthogonal,直角矩形)
• 超级玛丽,炸弹人,星际争霸,同级生
• Isometric(等距矩形 ,其实是特殊的Tile)
• 仙剑, 暗黑2, 帝国时代2 传奇
• 物理模拟
• 疯狂的机器, 割绳 , 可怜的绿猪
• 其他
• 大赛车FC,拳皇,祖玛,同级生(又是它)...
游戏 == 互动动画
Tile是最佳起点,也可以是完美终点
I Love Tile-Game
游戏 == 互动动画
游戏的其他元素:
• 创意/剧本
• 音乐
• UI
• 存储
• 网络
• 细节
• ......
游戏 == 互动动画
游戏流程
示例:
游戏 == 互动动画
OOP
把java那一套照搬到JS里是不对的,
但是, ......
PS:想在js里实现OOP,可以试一试
• GT-Class
• https://github.com/finscn/GT-Class
游戏 == 互动动画
游戏架构示例与浅析 (这不是继承关系图):
游戏 == 互动动画
游戏地图:
• 拼!拼!拼!
游戏 == 互动动画
游戏地图:
• 碰!碰!碰!
游戏 == 互动动画
Sprite
一个Sprite包含 多个Animation
一个Animation包含 多个Frame
一个Frame包含 多个碎片 & 多个碰撞区
游戏 == 互动动画
又该栗子兄弟出场了
其实挺命苦
HTML5游戏开发面临的难题
Oh BrotherSpring,肿膜就芥末命苦妮
在多舛的命运面前,有时会突然觉得自己无能为力,甚至一无所有
Tears... :’(
“声音”不够给力
浏览器不够”贪心”
神马标准都是浮云, 根本特马的不统一
"硬"伤, Hack也无能为力
性能表现上,依然不如...(咳咳,下一话题)
技术门槛低,对创意和创新要求高
代码保护/防破解/防作弊
不管与你的路有多苦
我只想要拥有最后的祝福
再多的伤害我都不在乎
愿你我挣脱一切的束缚
不管与你的路有多苦
擦乾眼泪告诉自己不准哭
我不怕谁说这是个错误
只要你我坚持
永不认输
学习资源推荐
推荐
为什么推荐这本如此老旧又没什么名气的书?
Developing Games in Java
Thanks !!!&
恐怖环节 >_<