Search the Community

How about Internet users? I am new to the forum and I have a very small javascript tour, perhaps my problem was that as soon as I entered javascript a friend was teaching me React. Sorry for my bad English, I'm Spanish-speaking. I suppose that many have already touched on this topic but I want you to clarify my doubt that if you can or not, to start with phaser I have more or less a week I did a lot of practices and everything was fine, but when I decided to create a platform project myself Example they have in phaser but in es6 and typescript I wanted to implement the philosophy of react separating the project into pieces in such a way that the code can be reusable, for example, if I need another button, I simply reuse the component that generates the button. All good so far, my question is the following I want to create a class of "Player", if I am not mistaken more or less this is the code to implement. class Character extends Phaser.GameObjects.Sprite { constructor(config) { super(config.scene, config.x, config.y, "character"); //keep a reference to the scene this.scene=config.scene; config.scene.add.existing(this); What I want is to know if I can place the image loads (preload) within that code, and the same movement mechanics (update) because what I have even understood is that for each scene it seems that you have to reload the images and as I said my idea is to reuse the codes creating class, I do not know if this is the correct idea, but I have been trying and I do not achieve anything, I have reviewed the example and I only see that they create the class alone without loading images and mechanics on the outside and they put everything in a file making it tedious, I repeat the attempt to implement the react philosophy and in order not to waste much time I ask them if I can achieve such a thing. In theory I want to achieve something like this, "WARNINGi" is just an assumption I know the code is wrong. Really thank you for your time I hope you can clarify my doubts and I hope you are well. :) class Character extends Phaser.GameObjects.Sprite { constructor(config) { super(config.scene, config.x, config.y, "character"); //keep a reference to the scene this.scene=config.scene; config.scene.add.existing(this); } // load images preload () { this.load.image('character', 'assets/sprites/character.png'); } update () { // player movement mechanics } } export default Character;

Hey All, I'm using WebPack to build my game and I've run into a scoping issue. I'll try and explain. Below is my TestScene scene/class. import 'phaser'; import Npcs from 'modules/Npcs.js'; const npcs = new Npcs() export class TestScene extends Phaser.Scene { constructor () { super('TestScene') } preload(){...} create(){ this.physics.add.collider( this.player, this.bombs, npcs.hitBomb, null, this ) } } Below is my npcs class import 'phaser'; const gameplayStates = new GameplayStates() export default class Npcs { hitBomb (player, bomb) { this.physics.pause(); player.setTint(0xff0000); this.entityDestroy() } entityDestroy () { console.log('destroyed') } } `this.player` and `this.bombs` are in place and work as expected in every way I intended. The callback in the collider method has `this`(testScene) as the context so, `this.entityDestroy()` no longer seems to work and fires app.bundle.js:116068 Uncaught TypeError: this.entityDestroy is not a function I suspect this is because the `npcs` class is not in the npcs class' scope when the method is called from the collider function. How can I get around this with the collider method? Your help would be much appreciated. Thanks all, Your help is much appreciatd.

Hi, I'm working on creating interactive buttons which, when clicked, will set the colour of the player. I've managed to do this successfully, in Phaser 3, but the code is quite bulky and ugly looking. I've just been gathering what examples I can through the website, but I'm certain there must be a better way to do this. Here's what I've got: I think what I want to do is create a class for "smalltiles", but I'm not sure how the inheritance should work for using alongside Phaser 3. I've tried writing something like in several different ways, without success: Does anybody have any insight as to how I might be able to do this better? Thanks for the input in advance.

In the Phaser 3 examples we have an example extending Phaser.Scene like so (http://labs.phaser.io/edit.html?src=src\scenes\scene from class.js): var MyScene = new Phaser.Class({ Extends: Phaser.Scene, // [...] using ES6 we might say instead: class MyScene extends Phaser.Scene { From what I see, I think that these are functionally very similar. But I could easily have missed or misunderstood something. Are these the same in effect (or almost the same)? If there are differences, what are the significant differences? Is one preferred over the other (assuming ES6 is an option)?

Just finding my feet directly in Phaser3 (no Phaser2 exp) [and indeed this forum! Hello there!] The sprites created with this.load.image('sky', 'assets/skies/space3.png'); does the name need to be unique to 'game' or to the 'scene' or not at all? (which i imagine causes problems or is there also a 'spriteID' system too?)

So I went through the basic platformer tutorial and one thing I don't like is that everything is thrown into the create an update methods. I'd like to clean that up a bit by breaking the player into it's own class: /** * Created by Robert on 1/4/18. */ /** * Create the game and define the size of the window. * * Phase.AUTO will use WebGL if the browser supports it * otherwise uses HTML5 canvas. * * @type {Phaser.Game} */ var game = new Phaser.Game(800, 600, Phaser.AUTO); /** * Create the game state. * * Preload: Where you load assets. * * Create: Called once at start. * * Update: Called every frame. * * @type {{preload: GameState.preload, create: GameState.create, update: GameState.update}} */ var GameState = { preload: function () { game.load.image('sky', 'assets/sky.png'); game.load.image('ground', 'assets/platform.png'); game.load.image('star', 'assets/star.png'); game.load.spritesheet('dude', 'assets/dude.png', 32, 48); }, create: function () { game.physics.startSystem(Phaser.Physics.ARCADE); game.add.sprite(0, 0, 'sky'); platforms = game.add.group(); platforms.enableBody = true; var ground = platforms.create(0, game.world.height - 64, 'ground'); ground.scale.setTo(2, 2); ground.body.immovable = true; var ledge = platforms.create(400, 400, 'ground'); ledge.body.immovable = true; ledge = platforms.create(0, 50, 'ground'); ledge.body.immovable = true; /** * Create the player. */ player = new Player(game, 32, game.world.height - 150, 'dude', 0); }, update: function () { var hitPlatform = game.physics.arcade.collide(player, platforms); player.update(hitPlatform); } }; game.state.add('GameState', GameState); game.state.start('GameState'); class Player extends Phaser.Sprite { constructor(game, x, y, sprite, frame) { super(game, x, y, sprite, frame); game.add.sprite(this); game.physics.arcade.enable(this); this.body.bounce.y = 0.2; this.body.gravity.y = 300; this.collideWorldBounds = true; this.animations.add('left', [0, 1, 2, 3], 10, true); this.animations.add('right', [5, 6, 7, 8], 10, true); this.cursors = game.input.keyboard.createCursorKeys(); } update(hitPlatform) { this.velocity.x = 0; if (this.cursors.left.isDown) { this.body.velocity.x = -150; this.animations.play('left'); } else if (this.cursors.right.isDown) { this.body.velocity.x = 150; this.animations.play('right'); } else { this.animations.stop(); this.frame = 4; } if (this.cursors.up.isDown && this.body.touching.down && hitPlatform) { this.body.velocity.y = -350; } } } Here is my code, I keep getting an error saying: TypeError: undefined is not an object (evaluating 'this.velocity.x = 0') for the first line of Player's update method. I'm not seeing what is wrong here. Any help would be really appreciated.

Hi, I was able to make scenes using vanilla javascript and BabylonJS. Now I want to refactor all in Typescript as my background is with C#. Anyone has an example how to import a class from another file including what loader do you use, I'm getting this error on the web browser: Uncaught ReferenceError: define is not defined at game.js This are extract of the files: index.html <!DOCTYPE html> <head> <script src="js/babylon.3.0.js"></script> <script src="js/hand-1.3.7.js"></script> <script src="./scripts/game.js"></script> <style> game.ts /// <reference path=".././js/babylon.3.0.d.ts"/> import { SceneUtils } from './sceneutils'; class Game { private _canvas: HTMLCanvasElement; private _engine: BABYLON.Engine; private _scene: BABYLON.Scene; private _camera: BABYLON.ArcRotateCamera; private _light: BABYLON.Light; constructor(canvasElement : string) { // Create canvas and engine this._canvas = <HTMLCanvasElement>document.getElementById(canvasElement); this._engine = new BABYLON.Engine(this._canvas, true); } createScene() : void { console.log("Start create scene"); // create a basic BJS Scene object this._scene = new BABYLON.Scene(this._engine); // create a FreeCamera, and set its position to (x:0, y:5, z:-10) //this._camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 5,-10), this._scene); this._camera = new BABYLON.ArcRotateCamera('camera1', 0, 0, 0, BABYLON.Vector3.Zero(), this._scene); this._camera.setPosition(new BABYLON.Vector3(0, 15, -30)); // target the camera to scene origin this._camera.setTarget(BABYLON.Vector3.Zero()); // attach the camera to the canvas this._camera.attachControl(this._canvas, false); // create a basic light, aiming 0,1,0 - meaning, to the sky this._light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0,1,0), this._scene); // create a built-in "sphere" shape; with 16 segments and diameter of 2 let sphere = BABYLON.MeshBuilder.CreateSphere('sphere1', {segments: 16, diameter: 2}, this._scene); // move the sphere upward 1/2 of its height sphere.position.y = 1; // create a built-in "ground" shape let ground = BABYLON.MeshBuilder.CreateGround('ground1', {width: 6, height: 6, subdivisions: 2}, this._scene); } sceneutils.ts /// <reference path=".././js/babylon.3.0.d.ts"/> export class SceneUtils { constructor(){} public SetSceneBackground(backgroundColor: string, scene): void { scene.clearColor = new BABYLON.Color3(1,0,0); } public GetCurrentBKColor(): string { return '#556789'; } } If I don't use the import declaration in game.ts, I don't get any errors and I can see my scene. However my project will have a lot of classes that I need to import in game.ts and other files. I was playing with require.js but I can't make it work. Thank you very much for your feedback!!!!!

Hi there! I'm new around here, and I'm quite new to JS and especially Phaser. I did a little bit of AS3 a few years back but I'm still pretty rusty, so right now I'm not really able to pull off what I have in mind. I hope you guys can help me out a bit! So, first things first, I am using a multi-state, multi-file-structure to keep it clean. I have succeeded in writing two classes which both have their own file, expanding Sprite and Group. This here is the constructor for the Class that uses Group, nothing fancy. Board = function (game) { Phaser.Group.call(this, game); }; Board.prototype = Object.create(Phaser.Group.prototype); Board.prototype.constructor = Board; Board.prototype.update = function() { }; 1. My first Problem is this: In this class, I have a function that is supposed to add Sprites to the Group in a specific manner: Board.prototype.build = function(Board_plan) { for (var i=0; i < 3; i++) { for (var ii=0; ii < Board_plan[1].length; ii++) { sprite = this.create(ii*100, i*140, 'board_blank'); } } }; In my preloader state, I load board_blank, and I'm able to use it in my main State without problems. When I create a new "Board" and then use this function, I get "Uncaught TypeError: Cannot read property 'getImage' of undefined" though. If I don't give a Sprite to the function and let it use the default, it works like a charm. I tried to retrieve the Sprite via cache (providing game to the function, then game.cache.getImage), didn't work either. So, how can I access my Sprite key from within extzernal classes or make them global or something? 2. Here's another one: The Sprite Class I mentioned earlier is meant for a certain type of game objects that I want to keep throughout my states. It carries a number of variables with specific values for each instance I'm creating. A bit like characters with different stats, which can be changed at any time and should therefore not be cleared ever. I understand that I have to instanciate them as global, which works so far. The problem is, if I add them to existing in one state, then switch to the next, my global variable is empty, I suppose because all sprites are cleared at the end of a state? So how would I solve this? Would It maybe be a better Idea to not expand Sprite, but also Group instead and then just add new instances of sprites on demand instead of relying on a single "base sprite"? There's more, but I think that's enough for now I appreciate for any help! Thank you!

Hello. I'm new to Phaser and kind of new to javascript so please bear with me: I'm using this Es6 Phaser boilerplate and in there, there's a Phaser.Sprite extension called Mushroom: import Phaser from 'phaser' export default class extends Phaser.Sprite { constructor ({ game, x, y, asset }) { super(game, x, y, asset) this.game = game this.anchor.setTo(0.5) } update () { this.angle += 1 } } So I tried to replicate this in the Phaser.Text Class like this: import Phaser from 'phaser' export default class extends Phaser.Text { constructor({game, x, y, text, style}){ super(game, x, y, text, style) this.game = game this.anchor.setTo(0.5) } } and then called it on the Game.js file, just like in the example: this.texto = new Texto({ game: this, x: 0, y:0, text:"hola mundo" }) this.game.add.existing(this.texto) but this is the result: How can I properly extend Phaser.Text or create a reusable class? What am I doing wrong? Thanks!

Hey people; I have been developing a framework. I want to publish it as an npm package. I bundle my code with webpack on framework project and I am using bundled js file inside the game project which is bundled via browserify. I wanted to test it with different bundlers. My case is; On framework; the folder hieararchy is; -src --index.js -release --index.js Webpack bundles ./src/index.js to ./release/indes.js in ./src/index.js I have simplest code snippet as follows; module.exports = 'tattaratatta'; on game project that I use framework, I have app.js and bundle.js. on app.js inside the game project I have the following code; var fr = require('./../framework/release/index.js'); console.log(fr); this logs out an empty object. but when I change it to; var fr = require('./../framework/src/index.js'); console.log(fr); it logs out tattaratatta correctly. I watched some tutorials on youtube, read some tutorials online but can't find out what I am doing wrong. Appearently, I can't seem to require te module from the bundled file. Any idea?

Hi there, i was searching the forum for a method to send information trough the states, and found this post that was very helpfull. http://www.html5gamedevs.com/topic/14708-controls-through-multiple-levels/?hl=%2Bobject+%2Bjson#entry84031 My question is.... Is there a way to create an object in another .js file and use it instead of passing the information with the function state.start? Thank you for your time, and sorry if i didn't explained myself well...English isn't my native language.

Hi, Is anyone attending the Developer Week Conference in San Fran next month? I've never attended this specific conference, and wanted to hear from anyone who has and/or will be attending this year. Any feedback would be great as I would like to know the perceived value of attending from those familiar with this - as I cannot tell from the schedule if this is a focused conference with any valuable classes for the BabylonJS community and other JavaScript tools such as node.js and WebSockets. Are any of you brains building the BabylonJS framework holding any workshops? Perhaps attending at all? Please let me know if you are familiar with this conference or have any thoughts as to it's value. Thanks, DBawel

Heya, Phaser newbie here. I've been playing around making Screens (aka states) and Buttons using this method here. But I seem to have hit a wall trying to put together a basic level. I created a simple floor and a basic object, but they keep ignoring each other. Individually they seem to behave fine. Also I feel the need to point out that I don't know if I'm creating classes the right way (every tutorial I've come across seems to have their own way of doing this, so it ends up being a little confusing for me). Any help would be appreciated. Level1 code: ForestGame.Level1_state = function (game) { //declare the Level function enemyATimer = 0; enemyA = null; levelFloor = null; };ForestGame.Level1_state.prototype = { preload: function() { // Everything in this function will be executed at the beginning. That’s where we usually load the game’s assets (images, sounds, etc.) }, create: function() { // This function will be called after the preload function. Here we set up the game, display sprites, add labels, etc. var style = { font: "58px Arial", fill: "#ff0044", align: "center" }; var text = this.add.text(this.world.centerX, this.world.height*0.2, "Hi, this is level1_state", style); text.anchor.setTo(0.5, 0.5); // set up the floor levelFloor = new ForestGame.LevelFloor(this); levelFloor.create(); // test enemy enemyA = new ForestGame.EnemyA(this); enemyA.create(); // set up phy this.physics.startSystem(Phaser.Physics.ARCADE); this.physics.enable( levelFloor, Phaser.Physics.ARCADE ); this.physics.enable( enemyA, Phaser.Physics.ARCADE ); }, update: function() { //floor vs. enemy this.physics.arcade.collide(enemyA, levelFloor); //Test tags //console.log("Test tags a:"+enemyA.texttag+" b:"+levelFloor.texttag); } };Floor code: ForestGame.LevelFloor = function(gameparam) { this.game = gameparam; this.floorSprite = null; this.texttag = "";};ForestGame.LevelFloor.prototype = { preload: function() { }, create: function() { //this.game.physics.startSystem(Phaser.Physics.ARCADE); this.floorSprite = this.game.add.sprite(this.game.world.centerX, this.game.world.centerY, 'lvl-floor'); this.floorSprite.anchor.setTo(0.5, 0.5); this.floorSprite.y = this.game.world.height; - this.floorSprite.height/4; this.game.physics.enable( this.floorSprite, Phaser.Physics.ARCADE ); //this.floorSprite.body.collideWorldBounds = false; //this.floorSprite.body.gravity.y = 1; this.floorSprite.body.immovable = true; this.texttag = "floortag"; }, update: function() { }};Enemy code: ForestGame.EnemyA = function(gameparam) { this.game = gameparam; this.enemyASprite = null; this.texttag = "";};ForestGame.EnemyA.prototype = { preload: function() { }, create: function() { //this.game.physics.startSystem(Phaser.Physics.ARCADE); this.enemyASprite = this.game.add.sprite(this.game.world.width-100, this.game.world.height - 300, 'enemya'); this.enemyASprite.anchor.setTo(0.5, 0.5); this.game.physics.enable( this.enemyASprite, Phaser.Physics.ARCADE ); this.enemyASprite.body.gravity.y = 100; this.enemyASprite.body.collideWorldBounds = true; this.texttag = "enemytag"; }, update: function() { }};

Hi there! I'm having an issue with trying to figure out best practices with creating multiple sprites on a screen. I've been using this blog post as a reference for how to structure my game into classes: http://toastedware.com/?p=258 and so far it's been great. I like how neat it leaves my code. However, I've been trying to create multiple instances of a class and whenever a new instance appears, the previous one loses all of its properties and just drops into the ether. Any advice on how to move forward? I've tried creating a group, but I'm not sure how to pass the class into it. For reference, here is my game so far: https://github.com/JLevstein/tigertail/tree/master/js

When using Flixel I would have a gamestate, a player, enemy, perhaps coins etc as separate classes. Maybe a registry that stored assets etc. I had been tooling around with ImpactJS and that framework uses a similar structure. How do I implement a structure like this with a Phaser game? I only want the the index.html to set the css etc and load the game.