jump-gammer:pixi-spine pixi2d小游戏跳一跳源码pixi教程，基于pixi-spine的2d游戏，正在...

# jump-gammer      这很简单，先这样再这样（= = 哈哈哈，做的时候就各种红了）。这个项目是我上一年参加虎牙小程序比赛，留下的（不知道现在虎牙小程序凉凉了没）。 那时候遇到了各种部署上去的问题，通宵了两晚修改pixi和pixi-spine的源码，遗憾的是错过了比赛提交的时间节点。所以这就是， 那个stone（人物踩在上方的，落脚物）为什么是HuyaLogo的原因。 所以把这个项目拉出来，修改成web页面，http升级成websocket，做个基本游戏的示范教程吧。 [项目示例](https://website.heartide.com/toy?from=singlemessage)，欢迎提issues。 ## 预览图    ## Demo Getting Started ```shell script # npm i # npm run serve ``` git clone 服务器[url](https://github.com/Kingbultsea/hserve-rabit) ```shell script # npm i # tsnd --respawn ./src/serve-1.0.1.ts ``` 完成，哪里报错改哪里（比如服务器url，需要直接修改下）。 ## 工具 * mvc或者mvvm框架，自己喜欢就行，用自己熟悉的。 * PixiJS，PixiJS是啥？ PixiJS是一个超快的2D渲染引擎。它自动侦测使用 WebGL 或者 Canvas。开发者无需专门学习 WebGL 就能感受到强大的硬件加速的力量。 emm，反正就是一个很厉害的东西（某厂哒哒最喜欢PixiJS了，我一开始研究他们的H5，他们就是用PixiJS实现各种好玩的交互的）。 * pixi-spine，骨架。使制作好的动画可以加载于Pixi，可以调用方法来进行动画播放。 * TypeScript，静态类型检查工具，游戏状态类型多，一定一定要用，不然修改对象类型根本无从下手。 * git，版本管理工具，顺便要说的是，要遵循常用Gitflow工作流程，大型的游戏一个人根本开发不来（虽然这不是大型游戏，但是建议哦，从小做起）。 * docker/cdn，部署项目用的，这个项目是基于cdn的，喜欢折腾自己的可以像这个游戏的服务器一样使用docker+travis。 * night-watch，e2e测试，本游戏需要4个玩家，不想心累的可以写e2e测试。 * 微信分享，微信获取名称，自己手写吧。 ## 教程 ### 游戏需求 游戏需要四位玩家，每位玩家只能控制三个位置，所移动到的位置如果有且仅有一位玩家到达，那么获得该位置得得分，否制大家都获得不了分数。 游戏房主在创建房间的时候，如果退出房间，该房间解散，玩家们需要重新选择房间或创建房间。 状态考虑的东西就有点多了。 ### 工具配置 ### Sprite Sprite是啥？可以当作一个图片的对象（texture纹理）。 生成一个sprite ```typescript const SPRITE = new PIXI.Sprite.from('xx.png') // or PIXI.Loader.shared.add("assets/spritesheet.json").load(setup) function setup() { let sheet = PIXI.Loader.shared.resources["assets/spritesheet.json"].spritesheet; let sprite = new PIXI.Sprite(sheet.textures["image.png"]); } ``` ### AnimatedSprite 动画序列帧Sprite,比如我们碰撞的时候需要眩晕效果，跳跃的时候需要尘埃效果，这个时候就可以使用播放序列帧的方法，达到动画的效果。 ```typescript public parseTexture(textures: PIXI.Texture, x: number, y: number) { const animationSprite = new PIXI.AnimatedSprite(textures) animationSprite.animationSpeed = 0.2 animationSprite.width = 50 animationSprite.height = 50 animationSprite.x = x animationSprite.y = y animationSprite.gotoAndPlay(Math.random() * 2) } ``` ### PIXI-SPINE #### 人物sprite 创建人物Sprite，人物？人物起码会动吧？面部表情？身体动作？那我们是不是要建造一个容器，容器里面包括无数sprite或者无数子容器，比如人物的手、脸部、头部等。 emmm，这也太难了吧？光是把sprite组合起来就已经麻烦了，而且还要按照规律来移动手臂，身体，脸部表情。 怎么办？pixi-spine走起。 #### stone sprite #### 跳跃AnimatedSprite #### 灰尘AnimatedSprite #### 气泡AnimatedSprite ### Action #### 移动路线 #### 移动方向判断 ### 碰撞 #### stone与人物保持x距离 #### 人物碰撞（性能优化，条件性判断碰撞） #### 碰撞相关特效展示 ### 游戏进入流程图 ### 游戏规则 ### 服务器逻辑状态处理