Quintus小游戏制作之Beta(一)
来源:互联网 发布:郭德纲谈网络喷子 编辑:程序博客网 时间:2024/06/11 11:00
Quintus是专门为制作网页游戏而存在的简易JavaScript库(注意是简易引擎),这里介绍我用Quintus库写的一款小游戏Beta,代码不过300行。
有关Quintus的介绍不多说,想学习用法的可以到Quintus官方网站,话说当初看到官网的界面是非常的喜欢呢。
咳咳,那么咱们就入正题了。
设计游戏的主线思路:引入游戏需要的模块 —> 加载外部文件 —> 添加精灵 —> 添加场景
一.引入游戏需要的模块
这里,Beta游戏的设计初衷是让玩家控制一块方块跳跃来越过所有的障碍。Quintus允许我们在初始化引擎的时候添加游戏可能用到的模块,比如精灵Sprite、场景Scene、输入Input、碰撞2D、控件UI、声音Audio、点击Touch、动画Anim等。(代码语言:LiveScript)
# initialize Quintus enginee including most of its modulesQ = Quintus( { imagePath: "images/Beta/"audioPath: "audio/Beta/"dataPath: "data/Beta/"development: true } ).include 'Sprites, Scenes, Input, 2D, UI, Audio, Touch, Anim'Q.setup { maximize: true } .controls!.enableSound!.touch!Q.input.keyboardControls {SPACE: 'up'}代码的作用是将游戏的模块加载到Quintus的一个实例Q里面来。其中在Quintus(options)里面通过options来自定义游戏图片、声音和数据的文件地址,默认地址分别是根目录下的"images"/"audio"/"data",但是考虑到网站里面有不止一个游戏(其实还有Alpha),所以需要修改默认的地址,下一步加载的时候Quintus就会在这些地址下找出相应的文件。
添加游戏的模块只需要在Quintus类后面调用include方法来包含模块的名字,即可以用字符串类型,不同模块中间用逗号隔开,也可以用数组,这里采用了字符串。
当然,引用了这些模块以后还需要对一些模块进行特殊的初始化,在setup里面我设置了游戏的画布大小为整个浏览器窗口{maximize:true},然后是输入、声音和点击模块的默认初始化。可以看到这些函数的调用是允许串联的。
最后,我希望利用空格键跳跃,修改Q.input类下的keyboardControls集合,将SPACE键码绑定给Quintus默认的跳跃键值'up',那么每当空格键被按下时Q.inputs['up'] == true。
二、加载外部文件
游戏很多时候需要加载外部的图片、声音和数据文件,虽然这些文件在开始写游戏的时候可能并未完全决定好,但是我习惯在代码的开始写好格式,方便以后修改。
# load pictures, sounds and jsons the game needspictures = ['background.png']sounds = ['jump.mp3', 'die.mp3', 'win.mp3']jsons = ['level.json']Q.load pictures ++ sounds ++ jsons, (!-> loadReady!), { progressCallback: (loaded, total)!->progress(loaded, total) }
Q.load( source, readyCallback, options ) 函数负责将所有source文件加载到游戏中来,这里我使用数组为了方便日后添加和删除文件。Q.load第二个参数readyCallback接收一个函数,它会在所有source加载完成后被调用。Q.load第三个参数options为一个集合,其中可以覆盖progressCallback函数,自定义一个加载动画,这个函数会有两个回调参数loaded和total,分别表示已经加载了的文件数量和总共需要加载的文件数量。progressCallback函数会在加载过程中被反复调用。
# display the loading statusprogress = (loaded, total) !->$ '.progress' .progress { percent: Math.floor(loaded/total*100) + "%" }$ '.label' .html Math.floor(loaded/total*100) + "%"
这里使用了semantic的进度条。
至此,游戏的大局已经布置好了,等等,那个loadReady函数是什么,哈哈,这个等写完场景Scene之后再来说。现在可以着手给游戏添加精灵和场景了,顺带一提,上面的代码其实在以后写其他Quintus游戏时都可以直接粘贴复用,我就是这么做的= =。 这期完整的代码如下:
function Beta# initialize Quintus enginee including most of its modulesQ = Quintus(imagePath: "images/Beta/"audioPath: "audio/Beta/"dataPath: "data/Beta/"development: true ).include 'Sprites, Scenes, Input, 2D, UI, Audio, Touch, Anim'Q.setup { maximize: true } .controls!.enableSound!.touch(Q.SPRITE_ALL)Q.input.keyboardControls {SPACE: 'up'}# load pictures, sounds and jsons the game needspictures = ['background.png']sounds = ['jump.mp3', 'die.mp3', 'win.mp3']jsons = ['level.json']Q.load pictures ++ sounds ++ jsons, (!-> loadReady!), { progressCallback: (loaded, total)!->progress(loaded, total) }loadReady = !->$ '#loading' .hide!Q.stageScene 'background', 0Q.stageScene 'UI', 2loadNextLevel!# display the loading statusprogress = (loaded, total) !->$ '.progress' .progress { percent: Math.floor(loaded/total*100) + "%" }$ '.label' .html Math.floor(loaded/total*100) + "%"
提示: load加载的文件大小尽量控制在1MB以下,不然加载会占用较多时间。
- Quintus小游戏制作之Beta(一)
- Quintus小游戏制作之Beta(二)
- js游戏引擎探索指南之Quintus
- java-----五子棋小游戏(一)-----背景图片制作
- Java从基础到进阶学习之路----数独小游戏制作(一)
- C2入门之制作pong小游戏
- 【cocos3.x+tilemap】制作rpg小游戏(一)地图制作
- web小游戏 2048制作(一):网页布局
- 使用PlayCanvas制作一个简单的小游戏(一)
- 手把手教你制作一款Box2D小游戏(一)
- Java小游戏之打飞机(一)
- JS制作的小游戏
- 小游戏制作思路
- C++小游戏制作启发
- c++制作小游戏--雷电
- EGE-小游戏制作指南
- phaser 小游戏制作
- Construct 2制作小游戏
- 短信拦截再总结
- 点击手机物理键返回
- Certificates, Identifiers & Profiles简介以及申请发布证书
- 面向对象
- breeze densematrix 基本操作
- Quintus小游戏制作之Beta(一)
- 欢迎使用CSDN-markdown编辑器
- Eclipse使用中的奇奇怪怪问题
- NYOJ 找数达人 (找n个数构成m是否存在)
- 浅谈数组与指针表示字符串的区别
- Android视频播放开源库vitamio
- LeetCode_105Construct Binary Tree from Preorder and Inorder Traversal
- git操作分支
- System.Configuration.ConfigurationErrorsException: An error occurred creating the configuration sect