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.
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 literally copied the code from the getting started section of the Matter.js library but an Uncaught TypeError occurs: "Engine.run is not a function".
I searched everywhere on the web but nothing helps. As a precaution, I added an event listener to run the code once everything is loaded.
<!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="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.9.2/matter.min.js" type="text/javascript"></script>
<title>Matter.js example</title>
</head>
<body>
<script type="text/javascript">
window.addEventListener("load",init);
function init() {
// module aliases
var Engine = Matter.Engine,
Render = Matter.Render,
Bodies = Matter.Bodies,
Composite = Matter.Composite;
// create an engine
var engine = Engine.create();
// create a renderer
var render = Render.create({
element: document.body,
engine: engine
});
// create two boxes and a ground
var boxA = Bodies.rectangle(400, 200, 80, 80);
var boxB = Bodies.rectangle(450, 50, 80, 80);
var ground = Bodies.rectangle(400, 610, 810, 60, { isStatic: true });
// add all of the bodies to the world
Composite.add(engine.world, [boxA, boxB, ground]);
// run the engine
Engine.run(engine);
// run the renderer
Render.run(render);
}
</script>
</body>
</html>
Please, what am i doing wrong ?
You are using wrong version of matter-js library, try with latest version. I just tried with 0.15.0, it's working fine.
matter-js >= 0.10.0 has the support Render.run(). Please make sure the version which you are using for supported features.
window.addEventListener("load",init);
function init() {
// module aliases
var Engine = Matter.Engine,
Render = Matter.Render,
Runner = Matter.Runner,
Bodies = Matter.Bodies,
Composite = Matter.Composite;
// create an engine
var engine = Engine.create();
// create a renderer
var render = Render.create({
element: document.body,
engine: engine
});
// create two boxes and a ground
var boxA = Bodies.rectangle(400, 200, 80, 80);
var boxB = Bodies.rectangle(450, 50, 80, 80);
var ground = Bodies.rectangle(400, 610, 810, 60, { isStatic: true });
// add all of the bodies to the world
Composite.add(engine.world, [boxA, boxB, ground]);
// run the engine
Runner.run(engine);
// run the renderer
Render.run(render);
}
<!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="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.17.0/matter.min.js" type="text/javascript"></script>
<title>Matter.js example</title>
</head>
<body>
</body>
</html>
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
});
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'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.