diagramDesigner 看图软件 下载地址 https://pan.baidu.com/s/1pQ5oSrd3GwbTNX2PpJbT6g
文档地址： https://pan.baidu.com/s/1F_L2GZaTdyo3luyZwZOpJA
说明
- github地址
gitHub地址
-
框架来源 《HTML5游戏编程核心技术与实战》.(向峰)
github地址： github地址 -
本框架经过修改了几个小细节
游戏框架介绍
- 介绍
- game 游戏主框架
- FrameState 控制游戏帧数
- AppEventListener 游戏监听器（循环执行前后）
- Scene 游戏场景类
- SceneManager 场景管理类
- RenderObj 渲染对象类（主要保存数据对象）
- Frames 帧动画对象
- Animation 帧动画集合
- FrameCtrl 帧控制对象
- Sprite 渲染对象
- JSON 加载资源
- ResManager 游戏资源管理类
- ResManager 键盘类
- BBox 包围盒抽象类
- ABBox 矩形包围盒
- PBBox 凸多边形包围盒
- PXBBox 像素包围盒
- State 状态抽象类
- StateContext 状态管理类
具体的可以看上面发出来的文档。
流程
-
Sprite
@desc 精灵类：
@effect 生成一个物体， 初始化和添加物体方法， 属性， 控制物体渲染等功能 -
首先 新增一个Game类， 初始化游戏的基本信息。 记录游戏的一些数据。
// 得分
score: 0,
// 生命值
hp: 100,
- 创建场景
//开始场景
var tSC = scm.createScene([{"x":x,"w":width,"h":height,"name":"title", el: document.querySelector(".main")}]);
- 初始化场景（游戏等待加载场景）
- 加载资源 （资源加载场景）
- 按照资源， 加载游戏配置
- 保存配置数据到game类内。
ResManager.loadRes("data/res.json",function(){
//加载游戏配置文件
ResUtil.loadFile("data/gamecfg.json",null,function(data){
self.cfg = data;
// 显示主画面
self.showMain();
});
},
function(total,cur){
//渲染进度条
var pro = (cur/total)*100|0;
$("#pTxt").text("Loading:"+pro+"%");
$("#pBar").width(pro + '%');
});
- 给场景添加 createRObj对象， 给这个对象初始化属性信息。 按照动画资源添加动画
var st = sc.createRObj(win[UpperSprit].ClassName, [sprit])
st.w = cfg.w
st.h = cfg.h
var anims = ResManager.getAnimationsByName(cfg.resName, cfg.fName)
st.setAnims(anims)
- 移动物体
st.moveTo(getCreen().width/2 - st.w / 2, getCreen().height / 2 - st.h / 2)
- 添加监听器
添加监听器， 需要在资源加载之前， 这样能够更好地监听
var ltn = new AppEventListener({
"afterRender":function(){
}
});
- 设置配置资源
- res.json 精灵资源类
image 是图片资源
name: 是资源名称
frame 加载的json文件资源
{
"image":
[
{"name":"Mario","src":"./images/mr.png"},
{"name":"bg","src":"./images/grame_bg.png"},
{"name":"apply","src":"./images/barrier/apply.png"},
{"name":"stone","src":"./images/barrier/stone.png"},
{"name":"watermelon","src":"./images/barrier/watermelon.png"},
{"name":"wuren","src":"./images/barrier/wuren.png"},
{"name":"orange","src":"./images/barrier/orange.png"},
{"name":"rabbit","src":"./images/grame_spirit_rabbit.png"},
{"name":"boom0","src":"./images/boom0.png"}
],
"frame":
[
{"name":"sprite","src":"data/sprite_frames.json"}
]
}
- sprite_frames.json 动画资源
key是 res.json 的name
type： 0 表示静止
1： 表示动画
img: = res.json 的name
"rc":[1,8,50,50], "帧描述信息"：通过数组描述帧信息，格式为[帧动画行数，
帧动画列数，每帧图片宽度，每帧图片高度]， 比如:[1，15，32，32]表示图片1行15列帧动作帧，每张图片宽度和高度都是32像素
animations: "动画集合"：动画集合用于存放每组动画帧在集合中的索引
"run":[0, 2], "动作1"：用数组表示集合中的动画帧索引，比如:[0，2]表示
获取动画帧集合中的0, 1, 2张图片
"jump":[6] 表示获取动画帧集合中的第7张图片
{
"bg":{
"type":0,
"img":"bg"
},
"Mario":{
"type":1,
"img":"Mario",
"rc": [0, 15, 32, 32],
"animations": {
"run": [0, 3],
"jump": [6],
"crouch": [14]
}
},
"apply":{
"type":0,
"img":"apply"
},
"stone":{
"type":0,
"img":"stone"
},
"watermelon":{
"type":0,
"img":"watermelon"
},
"wuren":{
"type":0,
"img":"wuren"
},
"rabbit":{
"type":0,
"img":"rabbit"
},
"orange":{
"type":0,
"img":"orange"
},
"boom0":{
"type":1,
"img":"boom0",
"rc":[1,8,50,50],
"animations":{
"def":[0,7]
}
}
}
- gamecfg.json 游戏属性资源
这里面， 可以控制一些任务的最大生命值， 最小生命值， 得分， 总分数等各种状态。
key对应的是精灵name, resName 是 res.json。name , fName 是 动画名称
{
"bg": { "w": 750, "h": 1334, "resName": "sprite", "fName": "bg", "src":"./images/grame_bg.png", "share": 1},
"boom0": { "w": 400, "h": 50, "resName": "sprite", "fName": "boom0"},
"apply": { "w": 89, "h": 103, "resName": "sprite", "fName": "apply", "score": 5, "hp": 0, "share": 1},
"stone": { "w": 110, "h": 149, "resName": "sprite", "fName": "stone", "score": 0, "hp": -100, "share": 2},
"watermelon": { "w": 103, "h": 103, "resName": "sprite", "fName": "watermelon", "score": 5, "hp": 0, "share": 1},
"wuren": { "w": 101, "h": 101, "resName": "sprite", "fName": "wuren", "score": 5, "hp": 0, "share": 1},
"orange": { "w": 100, "h": 100, "resName": "sprite", "fName": "orange", "score": 5, "hp": 0, "share": 1},
"rabbit": { "w": 101, "h": 101, "resName": "sprite", "fName": "rabbit", "scaleX": 0.5, "scaleY": 0.5},
"config": {
"time": 50,
"score": 100,
"importTime": 3,
"createTime": 1000,
"jiange": {
"x1": -20,
"x2": 20,
"y1": -100,
"y2": 100
},
"scale": {
"num": 5,
"bili": 0.01
},
"dx": [-1, 1],
"dy": [1, 10],
"skewSite": {
"x": 0,
"y": -50
}
}
}
集体可以看文档， 或去看 上面介绍的Pdf书。
- 按照配置新建sprite类
一个类一个资源文件比较好管理
例如： 苹果
基本格式可以做成这样。
(function (win, myName) {
win[myName] = Sprite.extend({
init: function (name) {
this._super(name)
},
//重新update
update: function () {
var h = this.owner.h
// 如果游戏开始
if (StickGame.state === 1) {
// console.log('苹果正在掉落');
//调用父类方法
this._super();
}
}
})
win[myName].ClassName = myName;
//注册Ball类
ClassFactory.regClass(win[myName].ClassName,win[myName]);
})(window, 'Apply')
网友评论