https://github.com/Zainking/learningPixi
game1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>lala</title>
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1, minimum-scale=1,maximum-scale=1,target-densitydpi=device-dpi">
<meta name="apple-mobile-web-app-capable" content="yes">
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.2.2/pixi.min.js"></script>
<script>
//Create the renderer
var renderer = PIXI.autoDetectRenderer(256, 256);
//Add the canvas to the HTML document
document.body.appendChild(renderer.view);
//Create a container object called the `stage`
var stage = new PIXI.Container();
//Tell the `renderer` to `render` the `stage`
renderer.render(stage);
</script>
</body>
</html>
game2
<!doctype html>
<html lang="zn">
<head>
<meta charset="UTF-8">
<title>动画精灵</title>
</head>
<body>
<div id="px-render"></div>
<script src="https://www.kkkk1000.com/js/pixi4.8.2.js"></script>
<script>
// 创建一个 Pixi应用 需要的一些参数
let option = {
width: 400,
height: 300,
transparent: true,
}
// 创建一个 Pixi应用
let app = new PIXI.Application(option);
// 获取渲染器
let renderer = app.renderer;
let playground = document.getElementById('px-render');
// 把 Pixi 创建的 canvas 添加到页面上
playground.appendChild(renderer.view);
//设置别名
let TextureCache = PIXI.utils.TextureCache;
let Texture = PIXI.Texture;
let Rectangle = PIXI.Rectangle;
let AnimatedSprite = PIXI.extras.AnimatedSprite;
//需要加载的雪碧图的地址（该图片服务器端已做跨域处理）
let imgURL = "https://www.kkkk1000.com/images/learnPixiJS-AnimatedSprite/dnf.png";
//加载图像，加载完成后执行setup函数
PIXI.loader.add(imgURL).load(setup);
function setup() {
//获取纹理
let base = TextureCache[imgURL];
//第一个纹理
let texture0 = new Texture(base);
texture0.frame = new Rectangle(0, 0, 80, 143);
//第二个纹理
let texture1 = new Texture(base);
texture1.frame = new Rectangle(80, 0, 80, 143);
//第三个纹理
let texture2 = new Texture(base);
texture2.frame = new Rectangle(160, 0, 80, 143);
//第四个纹理
let texture3 = new Texture(base);
texture3.frame = new Rectangle(240, 0, 80, 143);
//创建纹理数组
let textures = [texture0, texture1, texture2,texture3];
//创建动画精灵
let pixie = new PIXI.extras.AnimatedSprite(textures);
//设置动画精灵的速度
pixie.animationSpeed=0.1;
//把动画精灵添加到舞台
app.stage.addChild(pixie);
//播放动画精灵
pixie.play();
}
</script>
</body>
</html>