序

继上一次的想要做网页游戏怎么办？PixiJs 篇（一）后，这次继续更新一下这次的文章

之前有说关于pixi是什么以及基本的使用方法，这一次是关于我们创建出来的精灵对象运动状态的说明

就是如何让你的精灵在不断运动，成为一个动画精灵

参考文章（写的很不错，比较明了）：

https://blog.csdn.net/FE_dev/article/details/86141145

https://blog.csdn.net/FE_dev/article/details/86483753

提前看看效果

正文开始

准备材料

之前的文章中也曾经说过雪碧图，本次的动画精灵也主要使用了雪碧图去制作

本次用的图片依旧是从爱给网上找到的，还是宝可梦系列

还有谁不会飞？

把不会飞的神兽下载下来，放到我的 public 文件夹下

创建场景

首先先进行场景的创建，pixi 必不可少，使用的关键方法是 pixi.Application

别眨眼，创建场景代码（用 vue 组件写的啦）

<template><div id="animation"></div>
</template><script>
import * as pixi from 'pixi.js'export default {name:'animation',components: {},props: {},data() {return {loader: null,app:null,player: null,  };},created() {},mounted() {this.initState();},watch: {},computed: {},methods: {initState() {this.loader = new pixi.Loader();//Create a Pixi Application   创建一个pixi应用this.app = new pixi.Application({width: 735,         // default: 800 宽度height: 640,        // default: 600 高度antialias: true,    // default: false 反锯齿transparent: true, // default: false 透明度resolution: 1 ,      // default: 1 分辨率backgroundAlpha: 1   // 设置背景颜色透明度   0是透明});//其实上面已经设置透明了，这就没必要设置背景颜色了this.app.renderer.backgroundColor = 0x000000;  document.getElementById('animation').appendChild(this.app.view)this.app.renderer.view.style.display = "block";  this.app.renderer.view.style.marginLeft = "30px";  //设置canvas的左外边距this.app.renderer.autoResize = true;  this.app.renderer.view.style.border = "1px dashed black";  //设置边框}},
};
</script>
<style scoped>
</style>

这样场景舞台就已经布置起来了，等一下就在这个框中让精灵出现

pixi 中的动画精灵

虽然目前制作动画精灵最好应该是使用 spriteUtilities.js 这款插件库了，这也是本文的重点！

但是其实在 pixi 内部也是可以使用方法去制作出动画精灵的，使用 AnimatedSprite 方法

官方说明：http://pixijs.download/release/docs/PIXI.AnimatedSprite.html

定义一个精灵生成方法先：目前 pixi.js 调用 spriteUtilities 已经不需要 PIXI.extras.AnimatedSprite 了，直接 PIXI.AnimatedSprite 即可

setTexture (texture) {// console.log(texture)let sprite = new pixi.AnimatedSprite(texture);return sprite;
},

首先先看一下下载的雪碧图片大小，因为是 44 的图片，所以每一个小图形的大小就是 84 x 81

开始创建精灵：

mounted() {this.initState();this.players();
},

players() {let stage = this.app.stage, Container = pixi.Container, Graphics = pixi.Graphics, player = this.player, TextureCache = pixi.utils.TextureCache,Texture = pixi.Texture, Rectangle = pixi.Rectangle, AnimatedSprite = pixi.AnimatedSprite;/*******************  加载纹理贴图，创造精灵，并将精灵添加到stage舞台上 *******************/let jujinPng = './baoke/an3.png'this.loader.add([{name:'jujin', url: jujinPng}]).load(()=>{let textures = TextureCache['jujin'];// 第一个纹理  使用frame进行let texture0 = new Texture(textures);texture0.frame = new Rectangle(0, 0, 84, 81);let texture1 = new Texture(textures);texture1.frame = new Rectangle(84, 0, 84, 81);let texture2 = new Texture(textures);texture2.frame = new Rectangle(84*2, 0, 84, 81);let texture3 = new Texture(textures);texture3.frame = new Rectangle(84*3, 0, 84, 81);//创建纹理数组  这是图片中第一行的效果let textureArray = [ texture0, texture1, texture2, texture3 ];console.log(textureArray)// 上面的生成精灵方法player = this.setTexture(textureArray);stage.addChild(player);//设置动画精灵的速度player.animationSpeed=0.08;player.play();})
},

效果：

但是此种方法就比较麻烦，如果你要将这 16 份动作全部做出来，就需要使用 frame 去裁剪 16 次，并且之后用键盘控制精灵动作也不方便

spriteUtilities.js

更容易和更直观的方式来创建和使用 Pixi 精灵，以及添加一个状态机和动画播放器。和 Pixi 一起使用会非常有趣。

GitHub 仓库：https://github.com/kittykatattack/spriteUtilities

将此文件下载之后，使用标签导入即可<script src="./js/spriteUtilities.js"></script>

因为 spriteUtilities.js 可能很久没维护了，里面的部分内容需要我们自己修改适应一下

代码修改：

if (renderingEngine.ParticleContainer && renderingEngine.Sprite) {this.renderer = "pixi";this.Container = renderingEngine.Container;this.ParticleContainer = renderingEngine.ParticleContainer;this.TextureCache = renderingEngine.utils.TextureCache;this.Texture = renderingEngine.Texture;this.Rectangle = renderingEngine.Rectangle;this.MovieClip = renderingEngine.AnimatedSprite;this.BitmapText = renderingEngine.BitmapText;this.Sprite = renderingEngine.Sprite;this.TilingSprite = renderingEngine.TilingSprite;this.Graphics = renderingEngine.Graphics;this.Text = renderingEngine.Text;//An array to store all the shaking spritesthis.shakingSprites = [];
}

将之前的 players 方法进行修改

players() {let stage = this.app.stage, Container = pixi.Container, Graphics = pixi.Graphics, player = this.player, TextureCache = pixi.utils.TextureCache,Texture = pixi.Texture, Rectangle = pixi.Rectangle, AnimatedSprite = pixi.AnimatedSprite;/*******************  加载纹理贴图，创造精灵，并将精灵添加到stage舞台上 *******************/let jujinPng = './baoke/an3.png'this.loader.add([{name:'jujin', url: jujinPng}]).load(()=>{// 使用SpriteUtilitieslet animate = new SpriteUtilities(pixi);// console.log(animate)//创建纹理数组  将雪碧图变成纹理数组  66,48let frames = animate.filmstrip(jujinPng, 84, 81);// 创建纹理数组  只使用雪碧图中的一部分// let frames = animate.frames(jujinPng,[[0,0],[66,0],[132,0],[198,0]], 66, 48);// console.log(frames)let jujin = animate.sprite(frames);  //使用SpriteUtilities创建精灵// let jujin = this.setTexture(frames);  //使用之前的方法创建精灵stage.addChild(jujin);jujin.animationSpeed=0.08;jujin.vx = 0;jujin.vy = 0;jujin.play();})
},

好了好了，关于键盘和动画精灵的结合今天累了不写了

断----------------------------------------------------------------------------------------------------------------------------章

想要做网页游戏怎么办？PixiJs 篇（二）相关推荐

想要做网页游戏怎么办？PixiJs 篇（三）
序好久没记录过博客了,本来想五一写一下的,结果太忙了本文是继上一次断章的<想要做网页游戏怎么办 ?PixiJs 篇(二)>后续篇正文开始上一篇中实现的效果是动画精灵出现了,但是还没 ...
想要做网页游戏怎么办？PixiJs 篇（一）
序作为一个不太正经的前端开发人员,为了生存一定得想办法提升自己的能力呀!!! 想学习一些与前端能搭的上边的新知识,想做一个能在 web 上运行的小游戏练练手︿(￣︶￣)︿,就算不提高能力也得提高自己 ...
用XAML做网页！！—终结篇
原文:用XAML做网页!!-终结篇迄今为止的设计都很顺利,但这次就不得不接触我前面所说的非常糟糕的流文档了,但在此之前先来把标题弄好: <Border BorderBrush="#6 ...
网页游戏开发入门教程二（游戏模式+系统）
2019独角兽企业重金招聘Python工程师标准>>> 一.游戏模式目前webgame游戏模式大体上可以分为以下四类: 1.玩家拥有一个城市,不断的升级城市内建筑,建筑可以自动获得 ...
[原创]一起来做网页游戏---前言
本人前段时间自学了一个半月的flash,之后完成了这个植物大战僵尸的网页游戏.游戏中的Boss形象来自于自己的几个好朋友.采用全新的植物和僵尸形象,全新的剧情,全新地图,设计了不一样的属性和技能. 游 ...
arpg网页游戏之地图（二）
这一节说说视窗,这个视窗,也就是游戏的视角.现在的网页游戏分为2D游戏,2.5D游戏和3D游戏,2D游戏基本是一些横板的,2.5D基本都是arpg的,可以说游戏画面投影的角度略有不同,3D网页游戏,现 ...
android游戏性能测试,评测篇二十九：用游戏数据来彰显实力，华为nova5i Pro游戏性能篇...
评测篇二十九:用游戏数据来彰显实力,华为nova5i Pro游戏性能篇 2020-01-02 00:20:00 4点赞 1收藏 2评论笔者带着大家对华为nova5i Pro做了开箱测试,了解外观与 ...
网页游戏python_请问用Python能否做网页游戏的后台模拟鼠标类的脚本么？
后台模拟键盘的话需要修改内存,但是我做的是有关地下城的脚本,加上要图像识别的,所以只能在桌面模拟输入输出. 对于python来说,模拟键盘的方式据我了解有三种方式,其中有pyuserinput,win ...
模拟网页行为之工具篇二
先说360浏览器,打开开发者选项,可以看到界面提供了几个功能选项,如图: 这个图片的第一个搜索图标点中过后,再去选中网页你感兴趣的部分就可以在Element选项中跳转到你感兴趣的代码.也可以直接ctr ...

想要做网页游戏怎么办？PixiJs 篇（二）

序

提前看看效果

正文开始

准备材料

创建场景

pixi 中的动画精灵

spriteUtilities.js

想要做网页游戏怎么办？PixiJs 篇（二）相关推荐

最新文章

热门文章

想要做网页游戏怎么办 ？PixiJs 篇（二）

序

提前看看效果

正文开始

准备材料

创建场景

pixi 中的动画精灵

spriteUtilities.js

想要做网页游戏怎么办 ？PixiJs 篇（二）相关推荐

最新文章

热门文章

想要做网页游戏怎么办？PixiJs 篇（二）

想要做网页游戏怎么办？PixiJs 篇（二）相关推荐