游戏引擎讲解

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')
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,332评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,508评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,812评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,607评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,728评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,919评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,071评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,802评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,256评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,576评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,712评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,389评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,032评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,798评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,026评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,473评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,606评论 2 350

推荐阅读更多精彩内容