代码改变世界

HTML5 【IE9割绳子】制作教程来袭····

2012-03-26 08:04  【当耐特】  阅读(8443)  评论(33编辑  收藏  举报

回顾

与“Angry Birds”一样,2010年发布的“割绳子”是一款火爆的手机游戏,首先推出的是iOS版,于去年6月份推出Android版。它的游戏内容是:一个叫Om Nom的绿怪兽饿了,你必须喂他糖果,而要得到糖果,你要先割断绳子以及操纵安全气袋和泡泡,过程中还要收集星星来获取额外积分。

为了进一步宣传IE9和华丽的Web应用程序,微软与该款游戏的开发商ZeptoLab联合推出了HTML 5版“割绳子”游戏。

尽管这款游戏是为IE 9开发的,但它可以在任何兼容HTML 5的浏览器上运行。

背后的开发故事

在IE9割绳子推出一段时间后,微软发布了“《割绳子》HTML 5版背后的开发故事”一文。在此文当中,除了推荐了一个PxLoader资源加载库 和一堆开发工具和平台(Windows8、IE9、Visual Web Developer 2010 Express),没有透露一丁点对开发人员有价值的东西。而作为广大的技术狂热份子们,更关心的是GUI组件、游戏引擎、物理引擎、绳子、机关、气囊等物理模型的算法、引擎之间的集成等问题。

所以本人打算从开始,一步一步带领大家制作一个完整的IE9割''绳子''以及制作其相关的物理引擎。如果有可能的话,在IE9割绳子基础上做一些有趣的扩展。

教程目录

其中包括:

(1)HTML5 【IE9割绳子】制作教程来袭····

(2)游戏框架搭建

(3)资源加载

(4)动感气泡loading制作

(5)开场动画

(6)菜单制作

(7)对象建立

(8)碰撞检测

(9)游戏音效

(10)鼠标控制

11)绳子

12)气球

13)喷气囊

14)机关

(15)物理引擎制作

16)集成物理引擎

(17)关卡

(18)可玩性扩展

其中【碰撞检测】将会拆成几篇分别介绍,分别如下所示:

球与青蛙、气泡、星星碰撞检测

球与青蛙、气泡、星星碰撞反应

鼠标与绳子、气囊和气泡碰撞检测

鼠标与绳子、气囊和气泡碰撞反应

其中的【物理引擎制作】将会拆分为十四篇分别介绍,分别如下所示:

概述

面向对象编程

建立基本对象

集成单元测试框架

集成图形化输出接口

碰撞检测

AABB

OBB

碰撞反应

重叠处理

静止接触(待定)

物体休眠算法(待定)

关节、机关、绳子、气球、汽车

贴图

由于割绳子不同于《愤怒的小鸟》,其游戏整个过程不包含静止接触接触的状况,所以静止接触和物体休眠算法优先级最低。也就是说:不包含这两项功能的物理引擎也可以满足割绳子游戏的正常制作。

 

Hello cut the rope在线演示

请使用现代浏览器观看在线演示!

 

素材

image

素材已经从IE9割绳子官网全部拷贝下来,我已经准备好了,你准备好了吗?