Skip to content

weimob-tech/wmgame

Repository files navigation

wmgame logo

WmGame 基于html5,小程序以及小游戏的canvas的2d动画引擎

📂 介绍

轻量级Canvas类库

我们实现了游戏所必要的基础动画,引擎文件只有4K大小。让你告别底层canvas编程的痛苦,快速编写代码,并且代码可以兼容html5,小程序以及小游戏三端。一套代码可以同在在三端运行,提高开发效率

🏆 H5 Demo预览

h5 demo xiaoxiaole

example 目录下有该demo的源码

🔱 三端效果

H5 小程序 小游戏
demo demo demo

🎉 特性

  • 💡 体积小而功能丰富
  • ⚡️ 更快的加载速度
  • 🛠️ 支持三端的游戏引擎
  • 🔩 统一事件监听
  • 🔑 完整的api
  • 📦 可扩展性强

🔨 本地构建

$ git clone https://github.com/weimob-tech/wmgame.git
$ cd wmgame
$ npm install pnpm -g
$ pnpm install
$ pnpm build:prod

lib下会生成三份类库:h5、xcx(小程序)、xyx(小游戏)

👍 使用构建文件

1、引入js

 <script type="application/javascript" src="./lib/h5/wmgame.js"></script>  //h5

import wmGame from "./lib/xcx/wmgame.js";  //小程序

import wmGame from "./lib/xyx/wmgame.js";   //小游戏

2、初始化实例

wmGame.init("game",onCompleteHandle);

function onCompleteHandle(gdata,canvas){
    gdata.setFps(60);
    gdata.update("loop");
    ... //逻辑代码
}

⚡ 资源大小对比

名称                文件大小                      
CreateJS 172 KB
StreakJS 79 KB
Cax.js 126 KB
Pixi.js 554 KB
Matter.js 201 KB
WmGame.js 4 KB

🔑 整体流程

desc

💡 案例

案例 案例 案例 案例

🎈 协议

使用 MIT 协议