PixiJS — 视觉效果

最新推荐文章于 2023-07-14 14:32:37 发布

dabao87

最新推荐文章于 2023-07-14 14:32:37 发布

阅读量1.8k

点赞数

分类专栏： PIXI

本文链接：https://blog.csdn.net/dabao87/article/details/100545400

版权

PIXI 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

平铺精灵

brick.png

效果：

<!doctype html>
<html lang="zn">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>小精灵冒险!</title>
</head>
<body>
    <div id="px-render"></div>
    <script src="https://www.kkkk1000.com/js/pixi4.8.2.js"></script>
</body>
</html>
<script>
    let Application = PIXI.Application,
        Container   = PIXI.Container,
        loader      = PIXI.loader,
        resources   = PIXI.resources,
        Graphics    = PIXI.Graphics,
        TextureCache= PIXI.utils.TextureCache,
        Sprite      = PIXI.Sprite,
        Text        = PIXI.Text,
        TextStyle   = PIXI.TextStyle;

    let app = new Application({
        width:512,
        height:512,
        transparent:false,
    })

    //获取舞台
    let stage = app.stage;
    //获取渲染器
    let renderer = app.renderer;
    //把 Pixi 创建的 canvas 添加到页面上
    document.body.appendChild(app.view)
    //设置初始游戏状态
    let state = play;
    loader.add("images/brick.png").load(setup);
    //定义可能在多个函数中使用的变量
    let tilingSprite = undefined;

    function setup(){
        tilingSprite = new PIXI.extras.TilingSprite(PIXI.loader.resources["images/brick.png"].texture, 200, 200);
        stage.addChild(tilingSprite);
        gameLoop();
    }

    
    function gameLoop() {
        //循环调用gameLoop函数
        requestAnimationFrame(gameLoop);
        //运行当前状态
        state();
        //渲染舞台
        renderer.render(stage);
    }

    function play() {
        //通过修改平铺精灵 tilingSprite 的 tilePosition属性的 x 坐标，使背景滚动
        tilingSprite.tilePosition.x -= 1;
    }
</script>

着色

精灵有一个 tint 属性，给这个属性赋值一个十六进制颜色值可以改变精灵的色调。

关键代码：

let tilingSprite = new PIXI.Sprite(PIXI.loader.resources["images/brick.png"].texture);
tilingSprite.tint = 0xFFFF660;

原图与上面代码实现的效果的对比：

å¨è¿éæå¥å¾çæè¿°

每个精灵的 tint 属性默认值是白色（0xFFFFFF），也就是没有色调。如果你想改变一个精灵的色调而不完全改变它的纹理，就使用着色。

蒙版

Pixi 允许你使用 Graphics （图形）对象来屏蔽任何精灵或具有嵌套子精灵的容器。蒙版是隐藏在形状区域之外的精灵的任何部分的形状。要使用蒙版，先创建精灵和 Graphics 对象。然后将精灵的 mask 属性设置为创建的 Graphics 对象。

示例：

首先，用皮卡丘的图像创建一个精灵。然后创建一个蓝色正方形并定位在精灵的上方（形状的颜色并不重要）。最后，精灵的 mask 属性设置为创建的正方形对象。这样会只显示正方形区域内精灵的图像。精灵在正方形之外的任何部分都是不可见的。

原图与使用蒙版后的对比：
å¨è¿éæå¥å¾çæè¿°

    function setup(){
        let tilingSprite = new PIXI.Sprite(PIXI.loader.resources["images/meng1.png"].texture);
        //创建一个正方形对象
        stage.addChild(tilingSprite);
        let rectangle = new PIXI.Graphics();
        rectangle.beginFill(0x66CCFF);
        rectangle.drawRect(0, 0, 50, 50);
        rectangle.endFill();
        rectangle.x = 10;
        rectangle.y = 10;
        
        //给精灵设置蒙版
        tilingSprite.mask = rectangle;
        stage.addChild(rectangle);
    }

你还可以为蒙版设置动画，去做出一些有趣的效果。而且如果是用 WebGL 渲染的话，还可以用精灵作为蒙版。下面这个示例是用三张图片做成精灵，然后把一个精灵作为蒙版，并且给蒙版设置动画的示例。

å¨è¿éæå¥å¾çæè¿°

效果图：

å¨è¿éæå¥å¾çæè¿°

<!doctype html>
<html lang="zn">

<head>
    <meta charset="UTF-8">
</head>

<body>
    <div id="px-render"></div>

    <script src="https://www.kkkk1000.com/js/pixi4.8.2.js"></script>
    <script>
        //创建一个 Pixi应用 需要的一些参数
        let option = {
            width: 640,
            height: 360,
            transparent: true,
        }
        //创建一个 Pixi应用
        let app = new PIXI.Application(option);
        //获取舞台
        let stage = app.stage;
        //获取渲染器
        let renderer = app.renderer;
        let playground = document.getElementById('px-render');
        //把 Pixi 创建的 canvas 添加到页面上
        playground.appendChild(renderer.view);

        //需要加载的图片的地址
        let color = "https://www.kkkk1000.com/images/learnPixiJS-VisualEffects/bg.jpg";
        let blackWhite = "https://www.kkkk1000.com/images/learnPixiJS-VisualEffects/bg2.png";
        let clear = "https://www.kkkk1000.com/images/learnPixiJS-VisualEffects/clear1.png";

        //需要用到的精灵
        let colorSprite;
        let blackWhiteSprite;
        let clearSprite;
        //加载图像，加载完成后执行setup函数 
        PIXI.loader.add([color, blackWhite, clear]).load(setup);

        function setup() {
            //创建精灵
			let resources = PIXI.loader.resources;
            colorSprite = new PIXI.Sprite(resources[color].texture);
            blackWhiteSprite = new PIXI.Sprite(resources[blackWhite].texture);
            clearSprite = new PIXI.Sprite(resources[clear].texture);

            clearSprite.x = 250;
            clearSprite.y = 250;
			clearSprite.anchor.x=0.5;
			clearSprite.anchor.y = 0.5;

            colorSprite.mask = clearSprite;
            // colorSprite.blendMode = PIXI.BLEND_MODES.COLOR_BURN; //混合模式

            //把精灵添加到舞台上
            stage.addChild(blackWhiteSprite);
            stage.addChild(colorSprite);
            stage.addChild(clearSprite);

            //开始游戏循环
            gameLoop();
        }

        // 将游戏的当前状态设置为play：
        let state = play;
        function gameLoop() {
            // 循环调用gameLoop
            requestAnimationFrame(gameLoop);
            // 更新当前的游戏状态
            state();
            // 渲染舞台
            renderer.render(stage);
        }

        //使精灵移动的函数
        function play() {
            if (clearSprite.width < 1200) {
                clearSprite.width += 4;
                clearSprite.height += 4;
            }
        }
    </script>
</body>

</html>

参考：https://blog.csdn.net/FE_dev/article/details/86584974

dabao87

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
PixiJS — 视觉效果

平铺精灵 brick.png效果：<!doctype html><html lang="zn"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, ma...
复制链接

扫一扫