Search the Community

Hello, I wanted to extend the class BABYLON.Mesh with some functions, but I have problems. I created a file that does the following (extend.js): import BABYLON from 'babylonjs' import Helper from './helper.js' const {roundFloat} = Helper class Mesh extends BABYLON.Mesh { constructor () { super() console.log('check') } getMeshBounding (axis, val) { const boundingInfo = this.getBoundingInfo() // Native Bounding Info const max = boundingInfo.boundingBox.maximumWorld const min = boundingInfo.boundingBox.minimumWorld if (axis) { const value = val === 'max' ? max : min return roundFloat(value[axis]) } else { return { max: {x: roundFloat(max.x), y: roundFloat(max.y), z: roundFloat(max.z)}, min: {x: roundFloat(min.x), y: roundFloat(min.y), z: roundFloat(min.z)} } } } } export default Mesh And in the file, I want to use it (loader.js / same directory): import Mesh from './extend.js' const Loader = { loadObject: (scene, pos) => { // Create a built-in "sphere" shape; its constructor takes 6 params: name, segment, diameter, scene, updatable, sideOrientation var sphere = Mesh.CreateSphere('sphere1', 16, 2, scene, false, Mesh.FRONTSIDE) .... } } export default Loader But apparently he doesn't do it, otherwise a console.log would come. I'm relatively new to the ES2015 and Vue. Don't be too hard.

So I'm currently following @rich 's Shoot-em-up tutorial from over here https://phaser.io/tutorials/coding-tips-007. Please have a look at the source code if you haven't already. From what I understand he create's a weapon array that holds all the weapon types (each of which are an object inside a Weapon object). Now my question is How do I access the current weapon bullets in game.physics.arcade.collide? I've used game.physics.arcade.collide(this.weapon[this.currentWeapon], this.enemies) and this works fine, the bullets and the enemy collide well. BUT what if I want to kill that bullet? How would I pass the specific bullet that collided with the enemy into a function? This is what I've tried: game.physics.arcade.collide(this.weapon[this.currentWeapon], this.enemies, function(bullet, enemy) { bullet.kill(); }, null, this); However the above code doesn't work. Bullet is undefined. What do I do?

Hello, I'm trying to make separate weapon classes in an Asteroids-type game, for example a Missile.ts, Laser.ts, etc. What I have so far is this (Missile.ts): module Spaceroni { export class Missile extends Phaser.Weapon { constructor(game: Phaser.Game) { super(game, game.plugins); this.bulletKillType = Phaser.Weapon.KILL_LIFESPAN; this.bulletSpeed = 1500; this.fireRate = 20; } } } In my Player.ts I have weapon: Spaceroni.Missile; up top and I'm adding a weapon in its constructor with this.weapon = game.add.weapon(30, 'missile'); This isn't working (bulletSpeed and fireRate aren't changing), I think because game.add.weapon() creates a new weapon instance, separate from my Missile class. I would like to avoid putting all of this Missile-specific code directly into the Player class since I want to be able to change the weapon based on power-ups, as well as add the Missile weapon to enemies. Any ideas on how to properly extend the weapon plugin? Thanks in advance!

Hi is it possible to update one of the properties of the arc, in the RequestAnimationFrame draw function. So I would like to update the endAngle of the arc, so that after each frame it looks like the arc is extending, getting longer.

Hello! I'm having a hell of a time trying to create different bullet types in my game (and this problem extends to different weapon types, enemy types, etc.). I know how to extend Sprite, and I have done so to make a base bullet class. However, I can't seem to figure out how to extend that class to make bullets that behave differently. For example: I have a weapon of type Pistol that will shoot bullets of type BulletPistol, and a weapon of RocketLauncher that will shoot bullets of type BulletRocket. The form is like a typical bullet, while the latter will start moving slowly, then accelerate. My thinking is that for the base Bullet class, I can put in all of the default behavior. For BulletPistol, and any other weapons that use this behavior, I merely pass in the sprite I want to use. For BulletRocket, I will need to override the update function (at least) to change how the rocket moves. Here is the code in my Bullet.js file: var Bullet = function(game, key) { console.log("Bullet.prototype"); Phaser.Sprite.call(this, game, 0, 0, key); this.texture.baseTexture.scaleMode = PIXI.scaleModes.NEAREST; this.anchor.set(0.5); this.checkWorldBounds = true; this.outOfBoundsKill = true; this.exists = false; this.tracking = false; this.scaleSpeed = 0; }; Bullet.prototype = Object.create(Phaser.Sprite.prototype); Bullet.prototype.constructor = Bullet; Bullet.prototype.fire = function(x, y, angle, speed, gx, gy) { gx = gx || 0; gy = gy || 0; this.reset(x, y); this.scale.set(1); this.game.physics.arcade.velocityFromAngle(angle, speed, this.body.velocity); this.angle = angle; }; Bullet.prototype.update = function() { console.log("Bullet.prototype.update"); if (this.tracking) { this.rotation = Math.atan2(this.body.velocity.y, this.body.velocity.x); } if (this.scaleSpeed > 0) { this.scale.x += this.scaleSpeed; this.scale.y += this.scaleSpeed; } }; //////////////////////////////////////////////////////////// // PISTOL //////////////////////////////////////////////////////////// var BulletPistol = function(game) { console.log("Bullet.Pistol.prototype"); Bullet.call(game, 'img_BulletPistol'); }; BulletPistol.prototype = Object.create(Bullet.prototype); BulletPistol.prototype.constructor = BulletPistol; BulletPistol.prototype.fire = function(x, y, angle, speed, gx, gy) { // }; BulletPistol.prototype.update = function() { console.log("Bullet.Pistol.prototype.update"); }; Here are the error messages and console logs I get when I load my game: I'm not sure what I'm doing wrong, exactly. I went through 11 pages on this forum and several more on Google, but the closest things I could find to what I'm attempting were written in other languages. Any insight on how to extend an extended class is greatly appreciated!

Hi. I'd like to create a component that extends Phaser.Group so that I can add elements to it, and then add the entire component to anywhere in my game. But, it seems like I'm misunderstanding something. This is my code: GameName.Entity = function(game) { Phaser.Group.call(this, game);};GameName.Entity.prototype = Object.create(Phaser.Group.prototype);GameName.Entity.prototype.constructor = GameName.Entity;GameName.SomeStage = function(game) {};GameName.SomeStage.prototype = { var entity = new GameName.Entity(this.game); // Throws: Uncaught TypeError: Cannot set property '_iPrev' of undefined this.game.add.existing(entity); }};What am I doing wrong?

Hi, I'm new to Phaser, as a prove-of-concept and get-to-know-phaser for my final app (which will be pretty big) I'm building simple chess game. I'm stuck on extending Phaser.Sprite object with my own, I need to send some extra information with Sprite to onInputDown event. Maybe there is some other way around to do this, I dont insist on extending, if there is some other clean way to get information to event callback. As mentioned I'm using coffee script (I dont insist on cs either, but I'm not going back to clean javascript). I have PieceFactory, that is creating Pieces, here is coffee script code, its realy nothing Factory: drawPawn: (x, y, color)-> targetField = @board.getSquare x, y pawn = new Piece(@game, targetField.positionX, targetField.positionY, color, 5)Piece class: class Piece extends Phaser.Sprite constructor: (game, x, y, texture, frame)-> sprite = super game, x, y, texture, frameThis is Piece compiled to this javascript code: var Piece, __hasProp = {}.hasOwnProperty, __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };Piece = (function(_super) { __extends(Piece, _super); function Piece(game, x, y, texture, frame) { var sprite; sprite = Piece.__super__.constructor.call(this, game, x, y, texture, frame); } return Piece;})(Phaser.Sprite);When this code executes, nothing happens. No error codes, no renders, as it was never executed... I would love to know how to get this extending working with coffee script. I would also appreciate "best practices" for passing data and/or functionality to event callbacks. Thanks in advance, have a nice day. Solution: Extending was working ok, you need to append your Sprite instance to world / group / etc. Example given: customSprite = new ExtendedSprite(100, 100, 'sprite_name')@game.world.addChild customSprite # @game is instance of Phaser.Game obvsly

In a project I'm working on, we have a card object, which is an extended group. It represents a sort of TCG card graphic. It's an extended group because it consists of several different sprites, some of which are fixed, while some vary with the card type. There's the background card sprite, three different icons (one for each but the top corner) and the character graphic that goes on top. The thing is, I'd like to add some events to this extended group, but I'm not sure how to do it without overriding the existing events object that get's added on the group some time later in the initialization. To explain a bit better what I'm trying to do, here's a code snippet of my constructor: var Combatant = function (game, team, position, texture) { this.game = game; Phaser.Group.call(this, this.game); // removed code that's adding adding various sprites to the group here var self = this; this.customEvents = { onDamaged: new Phaser.Signal(), onHealed: new Phaser.Signal() } }; Combatant.prototype = Object.create(Phaser.Group.prototype); Combatant.prototype.constructor = Combatant;Now, as you can see, I've added a "customEvents" object where all my extra events will go. However, I feel it would be better to have those objects within the regular events object of the base Phaser.Group base. The thing is, if I do it at this point in the constructor, the regular events object is still undefined, so there's nothing to extend. On the other hand, just plain renaming "this.customEvents" to "this.events" also somehow prevents the default group events from being added to the object. So, any idea? What would be the best way to extend the default events object? Is it done in init? Create? Some other time? What's the convention?

Hi, I'm coming from flash/flixel perspective. When I'd need spawn enemies or track some objects and draw something on them repeatedly, I used to create a class instance which contains and watches objects, and mostly use it as kind-of factory pattern as well to generate objects too. I was doing this by extending groups in Flixel. I know groups are pretty similar in Phaser too. But possibly because of my lack of experience on OOP javascript, I haven't found a nice way to extend groups. Im extending groups this way; var ElementalSpawner = function(game,squad) { Phaser.Group.call(this,game);};ElementalSpawner.prototype = Object.create(Phaser.Group.prototype);ElementalSpawner.prototype.constructor = ElementalSpawner;Until this point everything is great but when I want to override Phaser.Group's update function, I had to do this; ElementalSpawner.prototype.update = function() { // Elemental Spawner update code here // super.update var i = this.children.length; while (i--) { this.children[i].update(); }};This works for sure, but I'm not comfortable with it. (So what if I was overriding a 200 line code function ) As you see I had to copy original group class's update functions contents into the overridden function. What I intended to do is similar to calling super.update() in AS3/Flash/Flixel. I'd like to ask for suggestions on how to extend and override functions of javascript/phaser classes? And more generally how would you design such structures like, spawners, healthbar renderers, GUI containers-updaters etc? I'm working on our "incomplete" LD48 game superdamage.com/LD29/dist Thanks.

Hi all, I'm currently trying to learn coding and Javascript using Pixi to make a clone of Colour Flood. I am having trouble extending the Graphics class (sorry I am unsure if class is the right word) in Pixi. I have two JS files, one called game.js for the game and one called token.js for the token class. What happens is when I run the program on my web server, I get an error that says "Cannot read property 'points' of undefined." This occurs right as I try use the drawRect function. Here's the code for my token function Token (color) { this._R = Math.floor(color/0x10000); this._G = Math.floor(color/0x100-this._R*0x100); this._B = color - this._R*0x10000 - this._G*0x100;}Token.prototype = Object.create(PIXI.Graphics.prototype);Token.prototype.constructor = Token;//Find a smooth transition to the next colourToken.prototype.findTransition = function(color, steps) { this._nextR = Math.floor(color/0x10000); this._nextG = Math.floor(color/0x100-this._nextR*0x100); this._nextB = color - this._nextR*0x10000 - this._nextG*0x100; this._tranR = (this._R - this._nextR)/steps; this._tranG = (this._G - this._nextG)/steps; this._tranB = (this._B - this._nextB)/steps;};I haven't really done much with it yet. Here's the code for my game: var viewWidth = 640;var viewHeight = 420;//Make a pixi Renderervar renderer = PIXI.autoDetectRenderer(viewWidth, viewHeight);renderer.view.className = "rendererView";// add render view to DOMdocument.body.appendChild(renderer.view);//create a new instance of pxi stagevar stage = new PIXI.Stage(0x000000);//Create an Array for the Squarevar squareArray = [];var totalSquare = 100;var colors = [0xFF0000, 0x00FF00, 0x0000FF, 0xFFFF00];for (var i = 0; i < totalSquare; i++) { var color = colors[Math.floor(Math.random()*4)]; var Token = new Token(color); Token.beginFill(color); var layer = Math.floor(i/10); Token.posX = viewWidth/11*((i+1)-(layer*10)); Token.posY = viewHeight/11*(layer+1); Token.drawRect(Token.posX, Token.posY, 10, 10); stage.addChild(Token); squareArray.push(Token);}renderer.render(stage);If you need any more info let me know. Thanks for the help! Lenny

I'm trying to extend an object to the sprite class in my game.js I know this is achived with: MonsterBunny.prototype = Object.create(Phaser.Sprite.prototype);MonsterBunny.prototype.constructor = MonsterBunny;But in the structure that is in the examples I'm not sure where to put it, I have it like this: BasicGame.Game.prototype = { MonsterBunny : function(game, rotateSpeed) { /*some code*/ }, Box : function(game, rotateSpeed) { /*some code*/ }, create: function () { }, update: function () { }}; /* I don't know where do I need to put this */ /*===========================================================*/ MonsterBunny.prototype = Object.create(Phaser.Sprite.prototype); MonsterBunny.prototype.constructor = MonsterBunny; MonsterBunny.prototype.update = function() { // Automatically called by World.update this.angle += this.rotateSpeed; }; /*===========================================================*/I know this is more a JS (noob) question, but i couldn't find a solution, so help would be appreciated