pixi

http://book.phaser-china.com/INTRODUCTION.html

厉害

 

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>

 

posted @ 2019-12-25 22:57  cnchengv  阅读(551)  评论(0)    收藏  举报