I've been attempting to learn Phaser 3 so I can support my students in learning the framework. I've been able to get a spritesheet working, however, I'd prefer to use a json file, so I'm using the load atlas instead. The problem I'm having no matter what I try is that the update method is giving an error when I attempt to play the animation I created in the create method.
It says, Uncaught TypeError: Cannot read property 'frame' of undefined
I'm exporting my json and spritesheet using LeshyLabs https://www.leshylabs.com/apps/sstool/
Here's my code. Any help would be very much appreciated.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>First Phaser Game</title>
<script src="//cdn.jsdelivr.net/npm/phaser#3.11.0/dist/phaser.js"></script>
<style type="text/css">
body {
margin: 0;
}
</style>
</head>
<body>
<script type="text/javascript">
var config = {
type: Phaser.AUTO,
width: 1200,
height: 800,
physics: {
default: 'arcade',
arcade: {
gravity: { y: 300 },
debug: false
}
},
scene: {
preload: preload,
create: create,
update: update
}
};
var game = new Phaser.Game(config);
var platforms;
var cursors;
var megaman;
function addPlatform(x,y,width){
for (i=0;i<width;i++){
platforms.create(x+(i*64), y, 'ground');
}
}
function preload()
{
this.load.image('bg', 'assets/ripbgzsnes03.png');
this.load.image('ground', 'assets/platform.png');
this.load.image('star', 'assets/star.png');
this.load.image('bomb', 'assets/bomb.png');
this.load.atlas('megaman', 'assets/spritesheet.png', 'assets/megamansprites2.json');
}
function create()
{
this.bg = this.add.image(2400,config.height/2,'bg');
this.bg.displayWidth = 4800;
this.bg.displayHeight = config.height;
this.physics.world.bounds.width = 4800;
platforms = this.physics.add.staticGroup();
addPlatform(0, 580, 40);
this.physics.add.collider(megaman, platforms);
this.anims.create({
key:'standing',
frames: this.anims.generateFrameNames('stand', {
prefix:'stand',
end:7,
zeroPad: 2
}),
repeat: -1
});
megaman = this.physics.add.sprite(100, 450, 'megaman');
megaman.setCollideWorldBounds(true);
cursors = this.input.keyboard.createCursorKeys();
// set bounds so the camera won't go outside the game world
this.cameras.main.setBounds(0, 0, 4800, config.heightInPixels);
// make the camera follow the player
this.cameras.main.startFollow(megaman);
}
function update()
{
megaman.play('standing')
// if (cursors.left.isDown)
// {
// megaman.setVelocityX(-250);
// // megaman.anims.play('running', true);
// }
// else if (cursors.right.isDown)
// {
// megaman.setVelocityX(250);
// // megaman.anims.play('running', true);
// }
// else
// {
// megaman.setVelocityX(0);
// // megaman.play('standing');
// }
// if (cursors.up.isDown && megaman.body.touching.down)
// {
// megaman.setVelocityY(-330);
// }
}
</script>
</body>
</html>
In your load statement, you're naming the atlas 'megaman' (name will be the first parameter passed into the load method). Then, in the anims.create() method, you're referencing an atlas called 'stand' to generate the frame names. That's why you're getting undefined.
You can see an example of setting up animations with an atlas here: Phaser Labs - Animation from Atlas.
In the meantime, if you change your create method to this, it should work:
this.anims.create({
key:'standing',
frames: this.anims.generateFrameNames('megaman', {
prefix:'stand',
end:7,
zeroPad: 2
}),
repeat: -1
});
Related
So I have this code that will run a game being this the base of that game. it uses phaser.
I was trying to run it on xampp on htdocs/itw/test.html
with the 2 pngs and json file being located on htdocs/itw/assets/
the pngs are tilesets and the json tilemap
but I get this errors on console executing the indext.html
Any Help would be awsome
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/phaser#3.15.1/dist/phaser-arcade-physics.min.js"></script>
</head>
<body>
<script>
const config = {
type: Phaser.AUTO, // Which renderer to use
width: 800, // Canvas width in pixels
height: 600, // Canvas height in pixels
parent: "game-container", // ID of the DOM element to add the canvas to
scene: {
preload: preload,
create: create,
update: update
}
};
const game = new Phaser.Game(config);
function preload() {
// Runs once, loads up assets like images and audio
this.load.image("quadrados1", "../assets/outside.png");
this.load.image("quadrados2", "../assets/outside2.png");
this.load.tilemapTiledJSON("mapa", "../assets/fcul_map.json");
}
function create() {
// Runs once, after all assets in preload are loaded
const map = this.make.tilemap({ key: "mapa" });
const tileset = map.addTilesetImage("outside", "quadrados1");
const belowLayer = map.createStaticLayer("Below Player", tileset, 0, 0);
const worldLayer = map.createStaticLayer("World", tileset, 0, 0);
const aboveLayer = map.createStaticLayer("Above Player", tileset, 0, 0);
}
function update(time, delta) {
// Runs once per frame for the duration of the scene
}
</script>
</body>
</html>
.. represents parent directory. Try removing them in your load statements
Ex.
../assets/outside.png to assets/outside.png
I am new to phaser and I am trying to detect a click on several images in phaser3 .This has somehow become a two part problem for me.
First is to detect click on the objects, but even if I click anywhere else on the screen also the click handler fires.
Second part is that I have identical and multiple images on the scene, and I want to detect clicks on each of them inside a single function only and detect which image was clicked .
Here is my code:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/phaser#3.24.1/dist/phaser-arcade-physics.min.js"></script>
<style media="screen">
canvas { display : block; margin : auto;}
</style>
</head>
<body>
<script>
var config = {
type: Phaser.CANVAS,
scale: {
mode: Phaser.Scale.ScaleModes.FIT,
parent: 'phaser-example',
autoCenter: Phaser.Scale.CENTER_BOTH,
width: 400,
height: 640
},
// width: 400,
// height: 640,
physics: {
default: 'arcade',
arcade: {
gravity: { y: 10 }
}
},
scene: {
preload: preload,
create: create,
update: update
}
};
var game = new Phaser.Game(config);
var Bimages;
function preload ()
{
this.load.setBaseURL('http://localhost:3000');
this.load.image('sky', 'assets/skies/deepblue.png');
this.load.image('tube1', 'assets/myassets/ballSort/tube.png');
this.load.image('tube2', 'assets/myassets/ballSort/tube.png');
}
var numOfTestTubes = 5;
var storeTubes = [];
function create ()
{
ctx = this;
this.add.image(400, 300, 'sky').scaleY = 1.2;
var t1 = ctx.add.image(150, 300, 'tube1');
t1.scaleY = 0.5;
t1.scaleX = 0.5;
var t2 = ctx.add.image(220, 300, 'tube2');
t2.scaleY = 0.5;
t2.scaleX = 0.5;
t1.setInteractive();
t2.setInteractive();
t1.on('pointerdown', handleclick);
}
function update(){
}
function handleclick(pointer, targets){
console.log("clicked0",pointer);
}
</script>
</body>
</html>
Can anyone help me out here please?
The pointerdown event listener on game objects is different than the pointerdown event listener on the global input manager. If you instead do this.input.on('pointerdown', ...) you'll get a callback with the pointer, but also an array of game objects that were clicked, with an empty array if no game objects were clicked. If you need to register clicks on input objects that overlap each other, you can change this behavior with #setTopOnly. You can check object equality or against some property expected such as the object's name or texture key. I linked a stackblitz with rectangles, but understand they are behaving the same as an image's hitbox would.
https://stackblitz.com/edit/phaser-so-global-input-manager?file=index.ts
So I was in the middle of game development with Phaser 3 and this error showed up in the console:
Cannot read property 'startSystem' of undefined
Here is my HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<style>
* {
padding:0px;
margin: 0px;
overflow: hidden;
}
</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shoot'Em</title>
<script src="phaser.min.js"></script>
<script src="game.js"></script>
</head>
<body>
</body>
</html>
And here is my Javascipt/Phaser Code:
var config = {
type: Phaser.AUTO,
width: window.innerWidth,
height:window.innerHeight,
physics: {
default: 'arcade',
arcade: {
gravity: { y: 300 },
debug: false
}
},
scene: {
preload: preload,
create: create,
update: update
}
};
var game = new Phaser.Game(config);
var platforms
function preload ()
{
this.load.image('player1', 'Player.png')
this.load.image('player2', 'Player2.png')
this.load.image('platform', 'Platform.png')
}
function create ()
{
🛑🛑🛑----➤game.physics.startSystem(Phaser.Physics.ARCADE);<---🛑🛑🛑🛑🛑
//Create Platforms
platforms.create(400, 568, 'platform').setScale(2).refreshBody();
platforms.create(600, 400, 'platform').setScale(0.1).refreshBody();
platforms.create(50, 250, 'platform').setScale(0.1).refreshBody();
platforms.create(750, 220, 'platform').setScale(0.1).refreshBody();
//Player 1
player1 = this.physics.add.sprite(100, -200, 'player1');
player1.setBounce(0.95);
player1.setCollideWorldBounds(true);
player1.body.setGravityY(300);
this.physics.add.collider(player1, platforms);
//Player 2
player2 = this.physics.add.sprite(300, -200, 'player2');
player2.setBounce(0.95);
player2.setCollideWorldBounds(true);
player2.body.setGravityY(300);
this.physics.add.collider(player2, platforms);
emitter = game.add.emitter(0, 0, 100);
emitter.makeParticles('player1');
emitter.gravity = 0;
game.input.onDown.add(particleBurst, this);
}
function particleBurst(pointer) {
emitter.x = pointer.x;
emitter.y = pointer.y;
emitter.start(true, 2000, null, 10);
}
Where the stop signs are is where the program stops.
I'm running on a local host.
FYI ALL THE FILES USED IN THE CODE ARE IN THE SAME FOLDER
Any help will be welcomed!
There are some errors I found in your example, maybe these steps will help to fix it:
You don't need to call game.physics.startSystem(Phaser.Physics.ARCADE); at all. Just remove this line.
Add update function
platforms.create will fail since platforms are not initialized. Here is example about groups
game.add will also fail - you don't need game, use this to access current scene.
There are a lot of examples with Phaser 2 that uses game, but in Phaser 3 you can just access the scene from create and update to add new objects.
I have trouble with Phaser.js. It's a copy of example from phaser.io/examples. And what the hell with it?
var game = new Phaser.Game(400, 200, Phaser.AUTO, 'phaser-example', {
preload: preload,
create: create,
update: update,
render: render
});
function preload() {
game.load.image('arrow', 'img.png');
}
var sprite;
function create() {
sprite = game.add.sprite(50, 50, 'arrow');
}
function update() {}
function render() {}
<script src="https://cdn.jsdelivr.net/npm/phaser#3.15.1/dist/phaser.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
</body>
</html>
But all i've got this ->
Google Drive Link - Screenshot result
or here
enter image description here
The problem is that you have set up a Phaser 2 game, while in your html you call the Phaser 3 library.
In Phaser 3 you can start a game like this:
var config = {
type: Phaser.AUTO,
width: 800,
height: 600,
scene: {
preload: preload,
create: create,
update: update,
render: render
}
};
var game = new Phaser.Game(config);
function preload() {
this.load.image('arrow', 'img.png');
}
var sprite;
function create() {
sprite = this.add.image(50,50, 'arrow').setOrigin(0,0);
}
function update() {}
function render(){}
https://phaser.io/tutorials/making-your-first-phaser-3-game/index
Im trying to add a simple menu to my Phaser game that loads first, then once someone clicks on a button the game actually starts. I can figure out how to add the buttons later, I just cannot figure out how to add the menu screen. Ive researched quite a few ways online on how to get this done but none have worked for me. I've also tried breaking the code up into different states but that didnt work for me either. Maybe I was doing it incorrectly. Can someone show me correct way to add a menu to my game that loads before the actual game does?
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>test</title>
<script src="//cdn.jsdelivr.net/npm/phaser#3.1.1/dist/phaser.js"></script>
<script type="text/javascript" src="menu.js"></script>
<style type="text/css">
body {
margin-top: 45px;
margin-left: 250px;
background-color: black;
}
.page-title {
color: white;
}
</style>
</head>
<body>
<script type="text/javascript">
//CONFIGURE GAME
var config = {
type: Phaser.AUTO,
width: 800,
height: 600,
physics: {
default: 'arcade',
arcade: {
gravity: { y: 300 },
debug: false
}
},
scene: {
preload: preload,
create: create,
update: update,
}
};
var player;
var stars;
var bombs;
var platforms;
var cursors;
var score = 0;
var gameOver = false;
var scoreText;
var game = new Phaser.Game(config);
game.state.add('title', title);
game.state.start('title');
//PRELOAD FUNCTION
function preload ()
{
this.load.image('sky', 'phaser_assets/sky.png');
this.load.image('background', 'phaser_assets/background.png');
this.load.image('ground', 'phaser_assets/platform.png');
this.load.image('star', 'phaser_assets/star.png');
this.load.image('bomb', 'phaser_assets/head1.png', { frameWidth: 48, frameHeight: 100 });
this.load.spritesheet('trump', 'phaser_assets/trump.png', { frameWidth: 48, frameHeight: 100 });
}
//CREATE FUNCTION
function create ()
{
// A simple background for our game
this.add.image(400, 300, 'sky');
// The platforms group contains the ground and the 2 ledges we can jump on
platforms = this.physics.add.staticGroup();
// Here we create the ground.
// Scale it to fit the width of the game (the original sprite is 400x32 in size)
platforms.create(400, 568, 'ground').setScale(2).refreshBody();
// Now let's create some ledges
platforms.create(600, 400, 'ground');
platforms.create(50, 250, 'ground');
platforms.create(750, 220, 'ground');
// The player and its settings
player = this.physics.add.sprite(100, 450, 'trump');
// Player physics properties. Give the little guy a slight bounce.
player.setBounce(0.2);
player.setCollideWorldBounds(true);
}
//UPDATE FUNCTION
function update ()
{
if (gameOver)
{
return;
}
if (cursors.left.isDown)
{
player.setVelocityX(-200);
player.anims.play('left', true);
}
else if (cursors.right.isDown)
{
player.setVelocityX(200);
player.anims.play('right', true);
}
else
{
player.setVelocityX(0);
player.anims.play('turn');
}
if (cursors.up.isDown && player.body.touching.down)
{
player.setVelocityY(-330);
}
}
</script>
</body>
</html>