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.
Related
i would like to create a battle system for an rpg game ,where an opening animation plays showing the battling characters move from the side of the screen to a location on the screen. Current code, assets and current running view provided below;
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>battle</title>
<script src="phaser.js"></script>
<style type="text/css">
body {
margin: 0;
}
</style>
</head>
<body>
<script type="text/javascript">
var config = {
type: Phaser.AUTO,
width: 1900,
height: 900,
physics: {
default: 'arcade',
arcade: {
gravity: { y: 0},
debug: false
}
},
scene: {
preload: preload,
create: create,
update: update,
}
};
var game = new Phaser.Game(config);
function preload(){
this.load.image("background","assets/battle background.png");
this.load.image("hydroBot","assets/water hydrant.png");
};
function create(){
const battle = this.add.image(0,0,"background").setOrigin(0,0);
const bot= this.add.image(1000,200,"hydroBot");
bot.setScale(5);
};
function update(){
};
</script>
</body>
water_hydrant/hydrobot
the battle background
the current view when running the code
much appreciated thanks :)
Yes, check for tween. You can move the image by using it.
I tried set my path with link from web and path of PC and didn't work, ever display this green square my screen:
My game.ejs file:
<!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">
<script src="//cdn.jsdelivr.net/npm/phaser#3.55.2/dist/phaser.js"></script>
<script src="//cdn.jsdelivr.net/npm/phaser#3.55.2/dist/phaser.min.js"></script>
<title>Document</title>
</head>
<body>
<script>
const config = {
type: Phaser.AUTO,
width: 800,
height: 600,
parent: 'phaser-example',
physics: {
default: 'arcade'
},
scene: {
preload: preload,
create: create,
update: update
}
};
var debug;
var source;
var target = new Phaser.Math.Vector2();
var distanceText;
new Phaser.Game(config);
function preload ()
{
this.load.image('worm', 'assets/worm.png');
}
function create ()
{
source = this.physics.add.image(100, 300, 'worm');
debug = this.add.graphics();
this.input.on('pointerdown', function (pointer) {
target.x = pointer.x;
target.y = pointer.y;
this.physics.moveToObject(source, target, 250);
}, this);
distanceText = this.add.text(10, 10, 'Click to set target', { fill: '#00ff00' });
}
function update ()
{
var distance = Phaser.Math.Distance.Between(source.x, source.y, target.x, target.y);
if (source.body.speed > 0)
{
distanceText.setText('Distância: ' + distance);
if (distance < 4)
{
source.body.reset(target.x, target.y);
}
}
}
</script>
</body>
</html>
That's like I said, nothing worked with url or path from my pc, I just want to display my sprite player on screen without that green square and I saw another questions, but nothing offered me a solution, what can I do?
It seems like it can't find the image its looking for, which means that either it doesn't exist, or more likely it doesn't exist in the location you've provided.
If you're serving this web page from the root (aka it's visible on http://localhost or http://127.0.0.1 than you could try simply adding a / in front of the path, as such: /assets/worm.png, the leading / means it'll search for the asset from the root of your webpage.
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
});
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>
I'm making a very basic game in Javascript using the Phaser Directory. I have made games with Phaser many times before but this time I have come across an issue that is new to me and I've never had before. I've looked it up online and no one seems to have had this problem. In phaser it is telling me my "x" is not defined when I refer to x as a position. How would I go about defining x as a position or what error am I facing? I and currently using VS Code on mac with a Chrome browser and newest version of Phaser.
Thanks for the Help,
Murdoc
var game = new Phaser.Game(640, 360, Phaser.Auto);
var car1;
var GameState = {
preload: function(){
game.load.image("thecar1", "../assets/car_1.png");
//game.load.image("thecar2", "../assets/car_2.png");
//game.load.image("backgroundImg", "../assets/thebackground.png");
},
create: function(){
var car1 = game.add.sprite(200, 270, "thecar1");
//var car2 = game.add.sprite(200, 270, "thecar2");
/*game.input.keyboard.addKey(Phaser.Keyboard.W)
.onDown.add(car1Up);*/
game.input.keyboard.addKey(Phaser.Keyboard.A)
.onDown.add(car1Left);
/*game.input.keyboard.addKey(Phaser.Keyboard.S)
.onDown.add(car1Down);
game.input.keyboard.addKey(Phaser.Keyboard.D)
.onDown.add(car1Right);*/
},
update: function(){
}
};
function car1Left() {
car1.x = car1.x + 10;
}
game.state.add('GameState', GameState);
game.state.start('GameState');
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pixel Soccer</title>
<script src="phaser.js"></script>
<script src="main.js"></script>
<style>
body {
background: white;
margin: 0;
padding: 0;
}
body canvas {
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
</body>
</html>
You're declaring the same variable twice. You're dealing with what's called "variable shadowing". When you do var car1 = game.add.sprite(200, 270, "thecar1"); in the create() function, the scope changes to function-only and the variable with the sprite you assign to it is only available in the scope of that function. The error basically comes to tell you that var car1 that you declared outside of the function scope is undefined (which it is). Try doing just car1 = game.add.sprite(200, 270, "thecar1"); inside create() and it should be fine.