游戏引擎讲解

diagramDesigner 看图软件 下载地址 https://pan.baidu.com/s/1pQ5oSrd3GwbTNX2PpJbT6g

文档地址: https://pan.baidu.com/s/1F_L2GZaTdyo3luyZwZOpJA

说明

  1. github地址
    gitHub地址
  1. 框架来源 《HTML5游戏编程核心技术与实战》.(向峰)
    github地址: github地址

  2. 本框架经过修改了几个小细节

游戏框架介绍

  1. 介绍
  • game 游戏主框架
  • FrameState 控制游戏帧数
  • AppEventListener 游戏监听器(循环执行前后)
  • Scene 游戏场景类
  • SceneManager 场景管理类
  • RenderObj 渲染对象类(主要保存数据对象)
  • Frames 帧动画对象
  • Animation 帧动画集合
  • FrameCtrl 帧控制对象
  • Sprite 渲染对象
  • JSON 加载资源
  • ResManager 游戏资源管理类
  • ResManager 键盘类
  • BBox 包围盒抽象类
  • ABBox 矩形包围盒
  • PBBox 凸多边形包围盒
  • PXBBox 像素包围盒
  • State 状态抽象类
  • StateContext 状态管理类

具体的可以看上面发出来的文档。

流程

  1. Sprite
    @desc 精灵类:
    @effect 生成一个物体, 初始化和添加物体方法, 属性, 控制物体渲染等功能

  2. 首先 新增一个Game类, 初始化游戏的基本信息。 记录游戏的一些数据。

    // 得分
            score: 0,
            // 生命值
            hp: 100,
  1. 创建场景
 //开始场景
                var tSC = scm.createScene([{"x":x,"w":width,"h":height,"name":"title", el: document.querySelector(".main")}]);
  1. 初始化场景(游戏等待加载场景)
  2. 加载资源 (资源加载场景)
  3. 按照资源, 加载游戏配置
  4. 保存配置数据到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 + '%');
                    });
  1. 给场景添加 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)
  1. 移动物体
 st.moveTo(getCreen().width/2 - st.w / 2, getCreen().height / 2 - st.h / 2)
  1. 添加监听器
    添加监听器, 需要在资源加载之前, 这样能够更好地监听
 var ltn = new AppEventListener({
                    "afterRender":function(){
                   }
});
  1. 设置配置资源
  • 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书。

  1. 按照配置新建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')

你可能感兴趣的:(游戏引擎讲解)