一个飞速构建HTML5的游戏框架, 飞的更高, 飞的更远!
简体中文
·
English
加载ninijs
<script src="nini.js" type="text/javascript"></script>页面中包含一个 canvas 标签并设置 id 为 canvas
<canvas id="canvas" width="800" height="450"></canvas>基本使用方法
- 创建一个场景类(可自定义)
- 必须继承框架的基础场景
SceneBase - 框架内部会执行场景内精灵的循环渲染
class MainScene extends SceneBase {
constructor(){
// 调用超类构造函数(必须)
super()
// 创建精灵 并设置位图
this.sp = new Sprite()
this.sp.bitmap = new Bitmap("./assets/images/nini_md.jpg")
// 设置坐标
this.sp.x = 0
this.sp.y = 0
// 刷新循环(必须)
this.loop()
}
// 定义update方法 实现动画的基础
update(){
// 调用父类的update(必须)
super.update()
// 改变坐标
this.sp.x++
this.sp.y++
}
}
// 初始化场景并跳转
SceneManage.go(MainScene)nini将画布(canvas)的绘图包装成精灵(Sprite)和位图(Bitmap),前者是游戏场景中能看到的部分，后者是图片的元数据
渲染方式为canvas或Html5，游戏默认帧率为60
修改帧率也是可以的，但不能超过60(目前还未实现)
Graphics.frame_rate = 30
在场景中除了显示精灵意外，还可以通过刷新循环(update方法)来实现动画效果，
Sprite 和 Bitmap 是 nini 重要的组成部分, 他们负责加载图片并将图片显示出来 他们两者不是强耦合, Bitmap 可以作为已加载的资源单独存在, 供Sprite使用 Sprite 主要设置图片在场景中的属性 ( 如坐标位置，角度，缩放比例，透明度等 )
场景是游戏的基础，nini 默认将场景进行极简地包装，只要继承 SceneBase 并在构造函数内设置精灵， update 内实现精灵动画效果
未完待续
遵循开源MIT协议