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.
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'm trying to make a website with multiple p5 canvases on the same page, so after a lot of research, I came to the conclusion that the most adequate way to do that is by using instance mode on p5.
I spent the whole day trying to understand the instance mode, i even found a converter online that converts it for me, but I'm trying to do it all by my self using it just to check errors. The problem is that i can't find a way to use sound in my sketch using instance mode. the code i have is a lot more complex, but even trying just the basic it still does not work.
var s = function(p) {
let song;
p.preload = function() {
p.song = load('thunder.mp3')
}
p.setup = function() {
p.createCanvas(720, 200);
p.background(255, 0, 0);
p.song.loop();
};
};
var myp5 = new p5(s, 'c1');
html, body {
margin: 0;
padding: 0;
}
canvas {
display: block;
}
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script>
<script language="javascript" type="text/javascript" src="sketch.js"></script>
<style> body {padding: 0;
margin: 0;
}
<meta charset="UTF-8">
</style>
</head>
<body>
<div id="c1"></div> <br>
<div id="c2"></div>
</body>
</html>
you can test it here: https://editor.p5js.org/jgsantos.dsn/sketches/rUWb6Nurt
This code works great in the global mode:
let song;
function preload() {
song = loadSound('thunder.mp3');
}
function setup() {
createCanvas(720, 200);
background(255,0,0);
song.loop();
}
html, body {
margin: 0;
padding: 0;
}
canvas {
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/addons/p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" />
</head>
<body>
<script src="sketch.js"></script>
</body>
</html>
You can test it here https://editor.p5js.org/jgsantos.dsn/sketches/_lQcDqOsp
It shows this error: "Uncaught ReferenceError: load is not defined (: line 9)"
What am I'm doing wrong?
Thanks in advance!
Please try to post the exact code you're running. Your question contains different code than the link you posted in the comments.
But taking a step back, here's how I would think about instance mode and libraries:
Instance mode means that the variables and functions that belong to a sketch are now referenced via a variable, in your case the p variable.
But variables and functions that belong to a library are still referenced directly, i.e. in "global mode".
In other words, you don't want to reference the load() (or is it loadSound()?) function using instance mode. You should still reference that function directly, since it's coming from a library instead of from a specific sketch.
I began coding a game in phaser and while getting the game states ready. It popped up a 'game.state is undefined' type error in the console. Not sure what to do as I've tried whatever I can to try to fix this problem. The code is given below.
The index.html file:
<!DOCTYPE html>
<html>
<head>
<title>Phaser Game</title>
<meta charset="utf-8">
<script src="phaser.min.js"></script>
<script src="state1.js"></script>
</head>
<body>
<script src="main.js"></script>
</body>
</html>
The Main.js file:
const game = new Phaser.Game(600, 400, Phaser.AUTO);
game.State.add('state1', demo.state1);
game.State.start('state1');
The state1.js file:
var demo = {};
demo.state1 = function(){};
demo.state1.prototype = {
preload: function(){},
create: function(){},
update: function(){}
};
There isn't state in game object. you should replace it with scene.
It's also better to use the standard way to create game object.
var config = {
type: Phaser.AUTO,
parent: 'phaser-example',
width: 600,
height: 400,
scene: {
preload: function(){},
create: function(){},
update: function(){}
}
};
var game = new Phaser.Game(config);
More details can be found on the phaser docs
You can Find many useful examples here
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.
In the trivial case of creating and then destroying an instance of Phaser.Game there appears to be a memory leak. Below is a complete working example: click the button to create an instance, click again to destroy it. Repeatedly clicking the button causes memory usage to grow without bound. Is there something I'm missing about the phaser lifecycle that I should be doing instead?
I'm posting this as a code snippet rather than a jsfiddle because you need to look a a memory profiler or something like that to see the problem and so jsfiddle just complicates the matter.
<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<title>test</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser-ce/2.8.1/phaser.js">
</script>
</head>
<body>
<button id="button">Click</button>
<div id="canvas"></div>
<script>
window.onload = function() {
var d, n, game;
d = document.getElementById('button');
n = document.getElementById('canvas');
function preload() {
}
function create() {
}
function update() {
}
function handler() {
if(game) {
game.destroy();
game = null;
} else {
game = new Phaser.Game(800, 600, Phaser.AUTO, n, {
preload: preload,
create: create,
update: update
});
}
}
d.onclick = handler;
};
</script>
</body>
</html>
Answering (at least partially) my own question, the problem is in Phaser.CanvasPool. Whenever a new Phaser instance is created a new canvas is created and added to the pool. Destroying the instance dows not remove the canvas from the pool or mark it as available for re-use.
You can kinda-sorta hack this into working by doing something crude like setting Phaser.CanvasPool.pool = [] after calling game.destroy(), but that won't work if you have multiple phaser instances going.
If anyone knows what the correct workflow is supposed to be I'd love to know---Phaser.CanvasPool is one of phaser's points of contact with PIXI and all of those appear to be poorly documented.
EDIT: Found the source of the memory leak. It's Phaser.Utils.Debug.boot(), which adds a new canvas to the pool every time it's called, which by default is every time a phaser instance is created and booted.
The problem affects only WebGL-rendered canvases when enableDebug is enabled (which is the default).
For completeness, here's an edited version of the code above which disables debugging and therefore does not exhibit the memory leak:
<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<title>test</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/phaser-ce/2.8.1/phaser.js"></script>
</head>
<body>
<button id="button">Click</button>
<div id="canvas"></div>
<script>
window.onload = function() {
var d, n, game;
d = document.getElementById('button');
n = document.getElementById('canvas');
function preload() {
}
function create() {
}
function update() {
}
function handler() {
if(game) {
game.destroy();
game = null;
} else {
game = new Phaser.Game({
width: 800,
height: 600,
renderer: Phaser.AUTO,
parent: n,
enableDebug: false,
state: {
preload: preload,
create: create,
update: update
},
});
}
}
d.onclick = handler;
};
</script>
</body>
</html>