用JSGF游戏框架开发支持HTML4的JS游戏!

冯伯约 发布于 2012/04/12 13:58
阅读 1K+
收藏 1

【开源中国 APP 全新上线】“动弹” 回归、集成大模型对话、畅读技术报告”

JSDK是一个新发布的JS框架。在开源中国社区上的项目首页:http://www.oschina.net/p/jsdk
完整教程,请访问JSDK网站:http://jsdk2.sourceforge.net/

JSGF游戏开发课程(一):游戏开发原理与基础

上一篇    下一篇

这是JSGF (JavaScript Game Framework)游戏开发系列课程的第一课,我们将学习2D游戏基本原理与基础知识。

在后面的课程中,我们会用JSGF写一个魔兽争霸2的游戏示例。 

声明:魔兽争霸2(Warcraft 2)是一款著名的即时战略游戏,由美国的暴雪公司制作,在1995年发行。
本示例游戏的图像与声音资源来自于网络,仅供游戏教学。


1. 游戏原理


游戏可以看做一种交互式的动画程序。在游戏过程中,允许玩家操作特定的“精灵”,在某些“场景”中行走,达成某些“任务”。


我们先解释一下游戏中的精灵是如何行走的。 
游戏的主线程程序会根据控制指令(主要是来自于玩家的鼠标与键盘,也可能来自于电脑AI程序)来改变精灵图像的位置并在画布上重新绘制。 由于主线程程序被不断的循环执行(除非退出条件满足),就产生了精灵在画布上行走的动画效果。 

为了让精灵的行走更加逼真,程序在新位置重绘精灵图像前,还会更新精灵图像(切换至下一帧动作图像)。 举例,以下是一张魔兽战士行走动作的逐帧图片:
 


在精灵移动过程中,精灵与其他精灵或物体可能发生交互(比如:碰撞、攻击、询问等),由此产生不同的“反应”。 
主线程程序也会检查不断玩家是否达到某些胜利或失败条件,当前过程就会结束(否则一直循环运行)。 

游戏主循环程序伪代码:

?
1
2
3
4
5
6
7
8
run: function (){
     while (...) {
         //1. move and paint sprites
         //2. check for all collisions
         //3. check for win or lose
     }
}                  

2. 游戏速度与恒定


游戏的速度同动画一样,是以帧速来描述的。动画播放速度是由每秒播放的帧数来决定的,又称FPS(Frame Per Second)。 
FPS的值越高,连续动作的细致度越高,动画画面越流畅。通常10到12FPS就可以产生差強人意的动画效果,一般设定为24FPS以上 以达到较流畅的播放效果。 

FPS的倒数值是SPF(Second Per Frame),也就是每帧画面的播放时间。 
游戏主线程间隔N秒执行一次,每次执行平均T秒,SPF的值就等于N+T。
由于时间T受各种因素的影响不可能完全相等,这就产生游戏可能时快时慢的问题。 

为了让游戏速度保持平稳,必须让SPF的值尽量保持恒定。 一般动态调整N值来让SPF值保持恒定:让N随着T增大而减小或随着T减小而增大。 当SPF趋于恒定,FPS也趋于恒定,游戏就能以平稳的速度运行。 
我们称之为:帧速恒定


3. 碰撞检测


碰撞检测是大多数游戏的最重要的处理机制。如果不能正确检测碰撞的发生,则可能出现很多“搞笑”的画面:比如人在墙中穿行等。 大多数2D游戏为了提高处理效率,通常由一些简单图形(矩形或圆形)来包围一个精灵的身体,于是精灵的碰撞就等价于这些图形(矩形或圆形)的碰撞。 

精灵发生碰撞,会产生不同的反应。游戏中需要检查所有碰撞和处理碰撞后的图像、动画或声音。 
比如:一个精灵被墙阻挡,需要更新该精灵的位置紧靠在墙的某一侧。 
又比如:一个精灵被击毙,需要绘制一个特殊动画:爆炸后渐渐消失,和一声“啊”的音效。


4. 游戏中的数学与物理


大多数游戏都需要一些基本的数学或物理学知识。游戏中的坐标运算、碰撞检测等都需要初等数学知识;而在物体运动的轨迹、角度、速度、能量等计算上,则需要初等物理学知识。 

我罗列出游戏中常用的数学与物理知识点,最好自行学习。后续的游戏Demo中,我会用到以下非星号标记的知识点。如果你有些遗忘或不太熟悉,也没有太大关系, JSGF提供的API足以应付常见的数学与物理计算,你将也从后续课程中看到这一点。 

数学


坐标系:直角坐标系、极坐标系 
几何:直线、线段、矩形、多边形,相交与斜率,三角函数,弧度运算 
向量运算* 

物理


参数方程: 匀速直线运动,匀加速直线运动,圆周运动等 
动能与势能* 
碰撞与能量守恒*


5. 游戏框架


一个好的2D游戏框架至少需要向游戏开发者提供以下基本功能:
 游戏主线程类:提供帧速检测与恒定能力,提供键盘与鼠标事件监听与自定义事件能力 
 2D画布类:可在画布上绘制精灵与地图或者动画
 精灵类:提供精灵API与事件,提供简单的碰撞检测能力 
 地图类:提供地图基本API,提供基本Tiles地图绘制能力 
 关卡类:提供关卡基本API与事件,并与主线程类协作完成游戏主循环处理 
 辅助工具类:音效播放类、2D动画库、2D数学物理函数库


下一讲,我会介绍这样一个不错的JS游戏开发框架:JSGF (JavaScript Game Framework)

加载中
0
红薯
红薯
这个 JSGF和JSDK是什么关系呢?
0
冯伯约
冯伯约
就像:JDK包含Swing、J2ME包含Game一样。
JSGF的底层需要JSDK的支持(Core/Thread/JS2D)。它随JSDK一起发布与升级。
红薯
红薯
了解:)
0
Ken
Ken

没接触过JSGF 

下一讲什么时候出?

0
冯伯约
冯伯约
文章的开头有教程地址。

完整教程,请访问JSDK网站:http://jsdk2.sourceforge.net/
0
pfdoschina
pfdoschina

链接都打不开了,是不是项目终止了?

对他所称的数学与物理计算API感兴趣。

0
冯伯约
冯伯约

链接我一直都能打开。不知道你为什么打不开?

对API感兴趣可以直接查看:API online

项目没有终止,只是我在写新版(他事拖累,进度较慢而已)。

当前新1.0版的代码仓库转移至github:https://github.com/fch415/jtdk

OSCHINA
登录后可查看更多优质内容
返回顶部
顶部