This isn't creating a Phaser.js animation and cycling through it one the 'wind' spritesheet. The wind spritesheet is 8 wide and 1 tall, and each sprite is 32x32 pixels. All variables not defined in this snippet are all found in a different file. All files are imported correctly, along with Phaser.JS. Another issue with the wind sprite sheet is when placing it using mapData, it loads the entire spritesheet to the screen, not cycling through each frame of it.
// Initialize Phaser game
const game = new Phaser.Game(800, 576, Phaser.AUTO, 'game-container', {
//25x18 grid for objects, assuming they are 32x32
preload: preload,
create: create,
update: update,
});
// Preload game assets
function preload() {
game.load.image('player', 'assets/player.png');
game.load.image('wall', 'assets/wall.png');
game.load.image('wallend', 'assets/wallend.png');
game.load.image('box', 'assets/box.png');
game.load.image('sign', 'assets/sign.png');
game.load.image('interaction', 'assets/interaction.png');
game.load.spritesheet('wind', 'assets/wind.png', { frameWidth: 32, frameHeight: 32 })
}
// Create game objects
function create() {
// Enable arcade physics
game.physics.startSystem(Phaser.Physics.ARCADE);
map = game.add.group();
map.enableBody = true;
boxes = game.add.group();
boxes.enableBody = true;
signs = game.add.group();
signs.enableBody = true;
wind = game.add.group()
wind.enableBody = true;
dialogueBox = game.add.graphics(0, 0);
dialogueBox.lineStyle(5, 0xffd700, 1);
dialogueBox.beginFill(0x000000); // Set the fill color to gold
dialogueBox.drawRect(75, 375, 650, 150);
dialogueBox.endFill(); // End the fill
dialogueBox.visible = false;
dialogueSpeaker = this.add.text(100, 385, 'null', {
fontSize: 15,
color: '#FFFF00',
fill: '#FFFF00',
fontFamily: 'main',
});
dialogueText = this.add.text(110, 410, 'null', {
fontSize: 22,
color: '#FFFFFF',
fill: '#FFFFFF',
fontFamily: 'main',
wordWrap: true,
wordWrapWidth: 625,
});
dialogueText.visible = false;
dialogueSpeaker.visible = false;
for (let row = 0; row < mapData.length; row++) {
for (let col = 0; col < mapData[row].length; col++) {
if (mapData[row][col] === -1) {
const wallend = map.create(col * 32, row * 32, 'wallend');
wallend.body.immovable = true;
wallend.body.setSize(32, 16, 0, 8); //let player tuck under objects
} else if (mapData[row][col] === 1) {
const wall = map.create(col * 32, row * 32, 'wall');
wall.body.immovable = true;
} else if (mapData[row][col] === 2) {
const winds = wind.create(col *32, row * 32, 'wind')
}
}
}
for (let row = 0; row < mapObject.length; row++) {
for (let col = 0; col < mapObject[row].length; col++) {
if (mapObject[row][col] === -1) {
player = game.add.sprite(col * 32, row * 32, 'player');
} else if (mapObject[row][col] === 2) {
const box = boxes.create(col * 32, row * 32, 'box');
} else if (
typeof mapObject[row][col] === 'string' &&
mapObject[row][col].startsWith('3')
) {
const sign = signs.create(col * 32, row * 32, 'sign');
sign.id = mapObject[row][col];
sign.body.setSize(32, 20, 0, 36);
}
}
}
game.physics.arcade.enable(player);
player.body.collideWorldBounds = true;
// Create player
// Set up keyboard input
cursors = game.input.keyboard.createCursorKeys();
// Set camera to follow player
game.camera.follow(player);
interaction = game.add.sprite(20, 20, 'interaction');
interaction.visible = false;
interaction.scale.setTo(0.75, 0.75);
this.anims.create({
key: 'windAnimation',
frames: this.anims.generateFrameNumbers('wind', { start: 0, end: 7 }),
frameRate: 10,
repeat: -1
});
// Play wind animation for each wind sprite
wind.children.iterate(function (child) {
child.anims.play('windAnimation');
});
}
directionArray = ['down'];
// Update game state
function update() {
// Player movement
player.body.velocity.x = 0;
player.body.velocity.y = 0;
if (!player.positionLocked) {
if (game.input.keyboard.isDown(Phaser.Keyboard.A)) {
player.body.velocity.x = -150;
directionArray.push('left');
game.input.keyboard.event.preventDefault();
directionArray = directionArray.filter((element) => element !== 'right');
} else {
directionArray = directionArray.filter((element) => element !== 'left');
}
if (game.input.keyboard.isDown(Phaser.Keyboard.D)) {
player.body.velocity.x = 150;
directionArray.push('right');
game.input.keyboard.event.preventDefault();
directionArray = directionArray.filter((element) => element !== 'left');
} else {
directionArray = directionArray.filter((element) => element !== 'right');
}
if (game.input.keyboard.isDown(Phaser.Keyboard.W)) {
player.body.velocity.y = -150;
directionArray.push('up');
game.input.keyboard.event.preventDefault();
directionArray = directionArray.filter((element) => element !== 'down');
} else {
directionArray = directionArray.filter((element) => element !== 'up');
}
if (game.input.keyboard.isDown(Phaser.Keyboard.S)) {
player.body.velocity.y = 150;
directionArray.push('down');
game.input.keyboard.event.preventDefault();
directionArray = directionArray.filter((element) => element !== 'up');
} else {
directionArray = directionArray.filter((element) => element !== 'down');
}
}
player.direction = directionArray[0];
// Collision detection
game.physics.arcade.collide(player, map);
game.physics.arcade.collide(player, boxes);
game.physics.arcade.collide(boxes, map);
game.physics.arcade.collide(boxes, boxes);
game.input.keyboard.onDownCallback = null;
// Push box when player collides with it
interaction.visible = false;
game.physics.arcade.overlap(player, boxes, pushBox, null, this);
game.physics.arcade.overlap(player, signs, pushSign, null, this);
}
var speechIndex = 1;
function pushSign(player, sign) {
interaction.x = player.x + 4.5;
interaction.y = player.y - 25;
if (player.inSign) {
interaction.visible = false;
} else {
interaction.visible = true;
}
var id = sign.id;
id = id.split(' ');
id = parseInt(id[1]);
dialogueSpeaker.text = speech[id][0];
dialogueText.text = speech[id][speechIndex];
game.input.keyboard.onDownCallback = function (event) {
if (event.keyCode === Phaser.Keyboard.E) {
if (player.inSign && speechIndex >= speech[id].length - 1) {
player.inSign = false;
dialogueBox.visible = false;
dialogueText.visible = false;
dialogueSpeaker.visible = false;
player.positionLocked = false;
speechIndex = 1;
} else {
player.inSign = true;
dialogueBox.visible = true;
dialogueSpeaker.visible = true;
dialogueText.visible = true;
player.positionLocked = true;
dialogueText.text = speech[id][speechIndex];
speechIndex++;
}
}
};
}
// Push box function
function pushBox(player, box) {
if (cursors.left.isDown) {
box.body.velocity.x = -pushSpeed;
} else if (cursors.right.isDown) {
box.body.velocity.x = pushSpeed;
} else if (cursors.up.isDown) {
box.body.velocity.y = -pushSpeed;
} else if (cursors.down.isDown) {
box.body.velocity.y = pushSpeed;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Simple 2D Top-Down Game</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.6.2/phaser.min.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div style="font-family:main; position: absolute; left:-1000px; visibility:hidden;">.</div>
<p id="test">
</p>
<div id="game-container"></div>
<script src="speech.js"></script>
<!-- Holds the game speech -->
<script src="maps.js"></script>
<!-- Holds the game maps -->
<script src="flags.js"></script>
<!-- Holds the variables and flags for the game -->
<script src="script.js"></script>
<!-- Main script -->
</body>
</html>
The issue is that your are mixing phaserCE with phaser3 syntax, one instance I noticed is in this line:
The correct syntax would be (link to the documentation)
The dimensions, have to be passed as a integer parameters, not as an object.