ive рискнул окунуться в мир PIXI и JS, нового для меня языка программирования, мне нравится то, как он сейчас есть, но у меня есть проблема.
Меня немного смущает TextureCache и погрузчик. Если вы посмотрите на часть моего кода, я попытаюсь добавить на экран 3 разных изображения. Я слежу за разделом «Начало работы» на веб-сайте pixi. Я хотел добавить их изображение кошки, которое у меня есть, изображение набора плиток (все) *, а затем плитку изображения набора плиток.
Проблема в том, что я создаю 3 новых экземпляра спрайтов и изображение набора плиток показывает область ive, установленную для плитки (ракеты), когда я хочу, чтобы она отображала весь набор плиток. Я загрузил тайлсет в кассету и загрузчик.
Почему плитка показывает обрезанное изображение, а не все изображение?
Правильно ли я использую кеш для хранения изображений?
Правильно ли я использую метод ресурсов, чтобы найти изображение ИЗ кеша или загрузчик?
есть смысл кеша?
мои мысли ** когда вы используете метод прямоугольника, он разрушает исходное изображение, и теперь обрезанная версия имеет значение tileset1 (имя моего изображения)?
<html>
<body>
<script src="pixi.js"></script>
<script>
//Aliases
let Application = PIXI.Application,
loader = PIXI.loader,
resources = PIXI.loader.resources,
Sprite = PIXI.Sprite,
Rectangle = PIXI.Rectangle,
TextureCache = PIXI.utils.TextureCache;
let app = new PIXI.Application({
width: 1000,
height: 600,
antialias: true,
transparent: false,
resolution: 1
}
);
//Add the canvas that Pixi automatically created for you to the HTML document
document.body.appendChild(app.view);
TextureCache["tileset1.png","images/3.png"];
//load an image and run the `setup` function when it's done
loader.add(["images/3.png","tileset1.png"]).load(setup);
//This `setup` function will run when the image has loaded
function setup() {
let texture = TextureCache["tileset1.png"];
let rectangle = new Rectangle(96,64,32,32);
texture.frame = rectangle;
//Create the cat sprite, use a texture from the loader
let card = new Sprite(resources["images/3.png"].texture);
let tile = new Sprite(resources["tileset1.png"].texture);
let rocket = new Sprite(texture);
card.scale.set(0.06,0.06);
tile.x=400;
tile.y=400;
rocket.x=100;
rocket.y=100;
//Add the cat to the stage
app.stage.addChild(card);
app.stage.addChild(tile);
app.stage.addChild(rocket);
app.renderer.render(app.stage);
}
</script>
</body>
</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.2.4/pixi.js"></script>