聊聊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 !!!&

恐怖环节 >_<