Home - shinku/miki-es6 GitHub Wiki

MIKI 教程

miki 游戏引擎用于在以融合 VUE 或者 react 脚手架的游戏引擎解决方案。 使得日常互动游戏项目的开发中，游戏部分以组件形式存在于项目中。 优点在于：

  • 1.脚手架的融合性 直接通过 es6 import 的方式引入游戏模块
  • 2.戏业务不再独立：跟以上所述类似，游戏部分可以更加方便的调用脚手架的组件，反之亦然。
  • 3.游戏使用到的素材也可以在整个应用中与脚手架共享。
  • 以上特征都集中在一点：融合性更高，以意味着对游戏的部分拥有更高的管制权限。

MIKI 游戏引擎使用方式

基本介绍

MIKI 是一套纯es6 开发的游戏引擎。目的之为了和vue以及react（es6） 框架出的游戏项目做到更好的融合性

暂时不支持 骨骼动画和graphics。

目前版本的miki 引入方式

import {miki,resource,stage,frameSprite,sprite,textField} from '@/lib/MIKI/index.js'

以上包含了所有目前miki 可用的游戏相关模块 游戏初始化：以vue 为例：

//创建vue组件
<template>
    <div class="stage" style="margin:0 auto;height:1200px;">
       <!--游戏组件容器，将会在class 为canvas的位置放置canvas画布-->
        <div class="mycanvas" ref="farm" width='750' height='1200'></div>
    </div>
</template>

初始化游戏

import {miki,resource,stage,frameSprite,sprite,textField} from '@/lib/MIKI/index.js'
......

//初始化canvas
this.canvas=document.createElement('canvas');
//dom中增加canvas 
document.getElementByClass('mycanvas')[0].appendChild(this.canvas);
//miki 初始化
//默认开启webgl。如果不支持webgl，会自动降级至 2d渲染
 miki.init(this.canvas,'webgl','h5');
//开始渲染。一般在场景素材都加载完成之后调用
 miki.render();

以上只是做到了miki的初始化，页面上除了白屏什么都看不到。 接下来将告知如何往画面上添加游戏元素。

miki中有3个重要的模块：

  • 以DisplayObjectContainer为主并在此基础上扩展的"显示列表系统"
  • resource 素材管理系统
  • render 渲染系统。
一般游戏的初始化流程包含：
  • 素材管理系统用于加载游戏需要的相关素材。
  • 显示列表内的元素调用素材管理系统中的素材与之绑定。
  • 最终再交由render系统渲染。

模块与模块之间会通过其依赖的shinEventDispatcher （自定义事件）进行消息的传递。 如果遇到 ShinEvent 或者 ShinEventDispatcher 模块找不到的情况出现，可以先执行下面的代码安装依赖：

npm install --save shinevent

所以一套完整的游戏执行流程大致如下:

import {miki,resource,stage,frameSprite,sprite,textField} from '@/lib/MIKI/index.js'
......
//监听resource 的资源载入事件
 resource.RES.addEventListener('loading',this.handleLoading,this);
//监听resource 的资源加载完成事件
 resource.RES.addEventListener('loaded',this.handleLoaded,this);
//开始初始化资源配置
this.initResource();
......
initResource(){
      //加载818/boom下的9张图片作为素材
     for(var i=1;i<=9;i+=2){
            //因为融合和vue的脚手架，所以可以直接用require作为资源载入的路径，并配置上资源名称以及资源的组别
            resource.RES.pushResource(require(`../../../assets/farm/818/boom/boom${i}.png`),`boom${i}`,'boom');
        }
    //素材开始i加载
    resource.RES.load();
}
handleLoading(e){
   //e.data 为资源的加载进度
    console.log(e.data)
}
handleLoaded(e)
{
  //游戏开始执行渲染
   miki.render();
   //新建序列帧播放对象
   const boom=new frameSprite();
   //根据资源组别名称获取名为boom的资源列表
   const boom_textures=resource.getResourceByGroupName('boom');
     //怎加播放名为playname的播放标签
    boom.addTagByGroup(boom_textures,'playme');
    boom.addEventListener('addedtostage',this.handleBoomAdded,this);
    //miki中的stage 为全局舞台，添加boom元素。boom在被添加至stage的同时会触发  addedtostage 事件。
    stage.addChild(boom);
   boom.x=100;
   boom.y=100;
}

handleBoomAdded(e)
{
    //  boomAdded后播放playme标签
   e.currantTarget.playTagName('playme');
}

以上就往画面中新增加了一名为boom的序列帧播放元件，序列帧一共9帧。
页面上所有可是元素可以通过addChild或者removeChild的方法实现增加和删除功能
后面的wiki将重点讲述 显示列表系统的相关属性和方法

⚠️ **GitHub.com Fallback** ⚠️