教程：
https://github.com/Zainking/LearningPixi
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
<link rel="stylesheet" href="css/styleme.css">
<script src="js/pixi.min.js"></script>
</head>
<body>
<script type="text/javascript">
//Aliases
let Application = PIXI.Application,
Container = PIXI.Container,
loader = PIXI.loader,
resources = PIXI.loader.resources,
TextureCache = PIXI.utils.TextureCache,
Sprite = PIXI.Sprite,
Rectangle = PIXI.Rectangle;
let app = new Application({
width: 512, // default: 800
height: 512, // default: 600
antialias: true, // 抗锯齿
transparent: false, // 背景透明
resolution: 1 // default: 1
});
app.renderer.backgroundColor = 0x0b2660;//背景色
app.renderer.view.style.position = "absolute";
app.renderer.view.style.display = "block";
app.renderer.autoResize = true;
app.renderer.resize(window.innerWidth, window.innerHeight);
document.body.appendChild(app.view);
console.log(app.stage, app.stage.height);
loader
.add("m", "images/m.png")
.load(setup);
let cat;
//This `setup` function will run when the image has loaded
function setup() {
//Create the cat sprite
cat = new Sprite(resources["m"].texture);
//Add the cat to the stage
app.stage.addChild(cat);
var cat2 = new Sprite(resources["m"].texture);
cat2.x = app.stage.width;
console.log(app.stage, app.stage.height, window.innerWidth);
cat2.y = 100;
app.stage.addChild(cat2);
requestAnimationFrame(moving);
}
function moving() {
if(cat.x>300){
cat.x=0;
}
cat.x+=1;
requestAnimationFrame(moveing);
}
</script>
</body>
</html>
Comments | NOTHING