PIXI入门以及解决图片跨域问题

最新推荐文章于 2024-06-04 09:03:55 发布

zlzbt

最新推荐文章于 2024-06-04 09:03:55 发布

阅读量2.2k

点赞数 4

分类专栏： PixiJs

本文链接：https://blog.csdn.net/zlzbt/article/details/116236076

版权

PixiJs 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一：什么是Pixi

Pixi是一个超快的2D渲染引擎。它会帮助你用JavaScript或者其他HTML5技术来显示媒体，创建动画或管理交互式图像，从而制作一个游戏或应用。它拥有语义化的，简洁的API接口并且加入了一些非常有用的特性。比如支持纹理贴图集和为精灵（交互式图像）提供了一个简单的动画系统。它也提供了一个完备的场景图，你可以在精灵图层里面创建另一个精灵，当然也可以让精灵响应你的鼠标或触摸事件。最重要的的是，Pixi没有妨碍你的编程方式，你可以自己选择使用多少它的功能，你可以遵循你自己的编码风格，或让Pixi与其他有用的框架无缝集成。

Pixi不仅仅能做游戏 —— 你能用这个技术去创建任何交互式媒体应用

二：安装 Pixi

首先去官网下载 pixi.min.js文件下载地址

下面就是基本的HTML页面，您可以使用它来链接Pixi并测试它是否正常运行。(这里假设pixi.min.js在一个名为pixi的文件夹中)

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Hello World</title>
    </head>
    <script src="../pixi/pixi.min.js"></script>
    <body>
        <script type="text/javascript">
            let type = "WebGL"
            if(!PIXI.utils.isWebGLSupported()){
            type = "canvas"
            }

            PIXI.utils.sayHello(type)
        </script>
    </body>
</html>

如果Pixi链接正确，通常会在浏览器的JavaScript控制台中显示类似于下面的内容。

三：创建一个精灵

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>sprites（精灵）与stage（舞台）</title>
</head>
<script src="../pixi/pixi.min.js"></script>

<body>

</body>
<script>
    let app = new Application({
        width: 400,
        height: 400,
        antialiasing: true,
        transparent: false,
        resolution: 1
    });
    document.body.appendChild(app.view);

    loader
        //调用一个add方法来加载数组中的图片
        .add('../images/cat.png')
        .on("progress", loadProgressHandler)
        .load(loadingFinish);

    // 每次加载一个文件时，progress事件就会被调用一次
    function loadProgressHandler(loader, resource) {
        console.log("loading: " + resource.url); 
        console.log("progress: " + loader.progress + "%"); 
    }

    //加载完成回调
    function loadingFinish() {
        console.log("All files loaded");

        // 创建一个精灵
        let sprite = new Sprite(resources['../images/cat.png'].texture);

        sprite.x = 50;  //定位 偏移左上角x方向
        sprite.y = 50;  //定位 偏移左上角y方向

        sprite.width = 100; //设置精灵宽度
        sprite.height = 100; //设置精灵高度

        sprite.scale.set(0.3, 0.3); //scale.set对精灵进行缩放 按顺序会覆盖上面的设置

        sprite.rotation = 0.1; // 旋转精灵

        // sprite.anchor.set(0.5, 0.5);  //更改精灵锚点位置  默认锚点就是精灵的左上角 也就是旋转中心的位置

        // sprite.pivot.set(32, 32)  //pivot轴心点设置了精灵的原点。 改变一个精灵的原点，你也就改变了它的坐标

        app.stage.addChild(sprite);
        sprite.visible = true; //使精灵消失的一种更简单、更有效的方法
    }

</script>

</html>

但是当你直接运行上面的文件内容时控制台有可能会报下面的错

此时有两个解决方案：

1: 将图片地址换成可以远程访问的图片地址，而不是去本地图片例如 (注意：我的图片是放到github上面的访问有可能需要梯子呦)

loader.add('https://raw.githubusercontent.com/zlzbt/Pixi_myFirst/master/images/Doraemon1.jpg').load(setup);

2：如果你是用的编辑器是vacode的话直接在vscode里面下载一个插件即可 Live Server；然后直接找到右下角的有个 Go live 点击一下就好了,下面就是正常展示的图片

四：总结

具体学习文档请参考 Pixi.js中文网

以及 Pixi学习demo

zlzbt

关注

4
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
PIXI入门以及解决图片跨域问题

一：什么是PixiPixi是一个超快的2D渲染引擎。它会帮助你用JavaScript或者其他HTML5技术来显示媒体，创建动画或管理交互式图像，从而制作一个游戏或应用。它拥有语义化的，简洁的API接口并且加入了一些非常有用的特性。比如支持纹理贴图集和为精灵（交互式图像）提供了一个简单的动画系统。它也提供了一个完备的场景图，你可以在精灵图层里面创建另一个精灵，当然也可以让精灵响应你的鼠标或触摸事件。最重要的的是，Pixi没有妨碍你的编程方式，你可以自己选择使用多少它的功能，你可以遵循你自己的编码风格，或让
复制链接

扫一扫