PixiJS 6.2.0 Sprite 加载

最新推荐文章于 2024-07-02 09:19:07 发布

zwz1110

最新推荐文章于 2024-07-02 09:19:07 发布

阅读量701

点赞数

分类专栏： pixijs 文章标签： javascript

本文链接：https://blog.csdn.net/zwz1110/article/details/121514827

版权

pixijs 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何利用Pixi.js库在网页中加载图片并创建精灵。首先，初始化Pixi应用程序，设置窗口尺寸和背景颜色。然后，通过Loader加载图片资源。一旦图片加载完成，将其添加到舞台上。此外，还展示了如何动态改变精灵的位置，通过Ticker更新精灵的x坐标，实现平滑移动的效果。

摘要由CSDN通过智能技术生成

方法一：

import * as PIXI from 'pixi.js'


let winWidth = window.innerWidth;
let winHeight = window.innerHeight;
let Apps = new PIXI.Application({
    width: winWidth,
    height: winHeight,
    antialias: true, // default: false 反锯齿
    transparent: false, // default: false 透明度
    resolution: 1, // default: 1 分辨率
});
document.body.appendChild(Apps.view);
Apps.renderer.backgroundColor = 0xffffff;
Apps.renderer.autoResize = true;


 const loaders = new PIXI.Loader();
    loaders
      .add("catImage", "https://g.mdcdn.cn/h5/img/act/201711/new-1-1.jpg")
    loaders.load((loader, resources) => {
      let cat = new PIXI.Sprite(loaders.resources.catImage.texture);
      Apps.stage.addChild(cat)
    })

方法二：

let Human = PIXI.Sprite.from(car, {
    crossOrigin: true,
});
Human.width = 50
Human.height = 50
// Human.rotation = 97
Human.position.y = 70
let elapsed = 0.0;
Apps.ticker.add((delta) => {
    //   console.log(delta);
    elapsed += delta;
    Human.x = 100.0 + Math.cos(elapsed / 50.0) * 100.0;
});