I'm normally a python guy, and although JavaScript isn't completely new to me, the Phaser game library is. I'm trying to make an archery game with Phaser, and although my game file isn't complete, to my knowledge this file should at least load a background image. Could someone help me figure out why it isn't loading anything? I'm using VSCode's live server extension to load it, if that helps.
Index HTML File
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>Game</Title>
<script type = "text/javascript" src = "phaser.min.js"></script>
</head>
<body><script type="text/javascript" src="archery_game.js"></script></body>
</html>
Game file
const game = new Phaser.game(800, 600, Phaser.AUTO, '', {
preload: preload,
create: create,
update: update })
//Variables
let score = 0
let scoreText
let arrows
let player
function preload() {
//Load and define our images
game.load.image('archer', 'archer.png')
game.load.image('sky', 'sky.png')
game.load.image('ground', 'platform.png')
game.load.image('target', 'archery_target.png')
}
function create() {
//Implement physics
game.physics.startSystem(Phaser.physics.ARCADE)
//Add the sky sprite
game.add.sprite(0, 0, 'sky')
//Create the ground
platforms = game.add.group()
platforms.enableBody = true
let ground = platforms.create(0, game.world.height - 64, 'ground')
ground.scale.setTo(2, 2)
}
function update() {
//Update physics
}
You need to capitalize the Game constructor:
const game = new Phaser.game(800, 600...
should be
const game = new Phaser.Game(800, 600...
See
https://phaser.io/docs/2.6.2/Phaser.Game.html
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.
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 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
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>
I am trying to get a simple Pong game going from Chris Bowen's MSDN blog:
http://blogs.msdn.com/b/cbowen/archive/2012/09/19/using-createjs-in-your-javascript-based-windows-store-game.aspx
I am at his "Setting the Stage" section and theoretically I should be able to launch the app and have the ball and paddles in my Pong game, but instead when I run the codes in Visual Studio 2012, I get the below error:
Exception is about to be caught by JavaScript library code at line 42, column 87 in ms-appx://521809a7-6594-45ba-a60e-bb529eac1299/js/createjs/easeljs-0.5.0.min.js
0x800a139e - JavaScript runtime error: TypeMismatchError
The program '[3756] WWAHost.exe' has exited with code 0 (0x0).
Unfortunately the easeljs-0.5.0.min.js file is minimized so it is ugly, but I believe this is the one causing the problem at the mentioned line and column:
var d=this._ctx.createPattern(a,b||"");
Below is my default.js file:
(function () {
"use strict";
WinJS.Binding.optimizeBindingReferences = true;
var app = WinJS.Application;
var activation = Windows.ApplicationModel.Activation;
app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
// TODO: This application has been newly launched. Initialize
// your application here.
} else {
// TODO: This application has been reactivated from suspension.
// Restore application state here.
}
args.setPromise(WinJS.UI.processAll().then(init()));
}
};
var ball, paddle1, paddle2;
var stage;
function init() {
stage = new createjs.Stage("gameCanvas");
ball = new createjs.Shape();
ball.graphics.beginFill("White");
ball.graphics.drawCircle(0, 0, 10);
ball.x = 400;
ball.y = 300;
paddle1 = new createjs.Shape();
paddle1.graphics.beginBitmapFill("White");
paddle1.graphics.drawRect(0, 0, 20, 100);
paddle1.x = 20;
paddle1.y = 300;
paddle2 = new createjs.Shape();
paddle2.graphics.beginBitmapFill("White");
paddle2.graphics.drawRect(0, 0, 20, 100);
paddle2.x = 760;
paddle2.y = paddle1.y;
stage.addChild(ball, paddle1, paddle2);
stage.update();
}
app.oncheckpoint = function (args) {
// TODO: This application is about to be suspended. Save any state
// that needs to persist across suspensions here. You might use the
// WinJS.Application.sessionState object, which is automatically
// saved and restored across suspension. If you need to complete an
// asynchronous operation before your application is suspended, call
// args.setPromise().
};
app.start();
})();
My simple default.html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Pong</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
<!-- Pong references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
<script src="js/createjs/easeljs-0.5.0.min.js"></script>
</head>
<body>
<canvas id="gameCanvas" width="800" height="600"></canvas>
</body>
</html>
You changed the paddle code to beginBitmapFill versus beginFill, but are still passing a color name into the call, and that's causing the type mismatch,
Per the documentation,
Graphics beginBitmapFill ( image , repetition )
Begins a pattern fill using the specified image. This ends the current subpath.
Parameters:
image <object> The Image, Canvas, or Video object to use as the pattern.
repetition <String> Optional. Indicates whether to repeat the image in the fill area.
One of "repeat", "repeat-x", "repeat-y", or "no-repeat".
Defaults to "repeat".
Returns:
Graphics The Graphics instance the method is called on (useful for chaining calls.)