Search the Community

Currently I have a group of sprites and I want to make them all fall at the same time. I am trying to accomplish this with the following functions, where the group (here: fallGroup) should fall when the down arrow key is pressed. (and yes, I have already initialized keys in the create() method) I have tried passing multiple versions of the function definition to callAll() (eg. "this.setVel", "game.setVel", ect.) as well as several different contexts instead of 'null' ("this", "that=this, then passing 'that' in", "game", "game.stage", ect.) but so far nothing happens. For some of the combos I get "TypeError: Cannot read property 'setVel' of undefined" others produce no error but also do not call my 'setVel' function. At this point I'm pretty lost as to what to do. Edit: appleYpos, groundYpos, appleTime; are all globally defined variables function setVel(sprite,vel) { sprite.body.velocity.y = vel; } function makeFall(group) { //calculate fall distance and then adjust velocity to meet time goal //note: velocity in physics.arcade is in pixels/sec let dist = appleYpos - groundYpos; let vel = dist/appleTime; group.callAll('setVel',null,vel); } function update() { if(keys.down.isDown) { makeFall(fallGroup); } }

In the game "Monster Wants Candy," I see this in the source code, and I was wondering why this was done. I've tried doing this myself but keep failing. This is what I mean: var Candy = {}; Candy.Boot = function(game){}; Candy.Boot.prototype = { preload: function(){ // preload the loading indicator first before anything else this.load.image('preloaderBar', 'img/loading-bar.png'); }, create: function(){ // set scale options this.input.maxPointers = 1; this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; this.scale.pageAlignHorizontally = true; this.scale.pageAlignVertically = true; this.scale.setScreenSize(true); // start the Preloader state this.state.start('Preloader'); } }; (source: https://github.com/EnclaveGames/Monster-Wants-Candy-demo/blob/gh-pages/src/Boot.js) var gameWidth = 800, gameHeight = 600; var game = new Phaser.Game(gameWidth, gameHeight, Phaser.AUTO), BootState = function () {}, gameOptions = { playSound: true, playMusic: true }, musicPlayer; BootState.prototype = { preload: function () { this.game.load.image('loadingbar', 'assets/images/loadingbar.png'); this.game.load.image('logo', 'assets/images/logo2.png'); this.game.load.script('LoadState', 'js/gamestates/LoadState.js'); this.game.load.script('pollyfill', 'js/lib/pollyfill.js'); this.game.load.script('utils', 'js/lib/utils.js'); }, create: function () { game.renderer.renderSession.roundPixels = true; Phaser.Canvas.setImageRenderingCrisp(this.game.canvas); this.game.state.add('LoadState', LoadState); this.game.state.start('LoadState'); } }; this.game.state.add('BootState', BootState); this.game.state.start("BootState"); I also note that I don't take "Game" as an argument in my game state functions, unlike Monster Wants Candy which has the argument "game" in it's bootstate. Have I been doing something wrong? I'm following most of the tutorials and example code I've seen so far, though I am aware those may not always be good examples of best practice. Thanks in advance for replies and sorry for the long post. I'm a bit of a JS and Phaser noob, I'm mainly just aiming to learn good practice with this project.

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?

Hi guys may I ask a quick question? I'm working with Phaser and I'm using the module pattern, creating a module that has a prototype of Object.create(Phaser.Sprite.prototype) and creating an instance of that in the main module. The problem is the sprite seems to be created in the main module in the create function but the image of the sprite is not loading and i cant find the problem or set the image. Thanks so much!!

I am having difficulty understanding this and scope in Javascript. I am attempting to create a dialogue box that pops up during various collisions, and perhaps part of the issue is I am not properly organizing my game. I can use this.showPopup("jump"); in the update function, but I cannot figure out how to call the showPopup function elsewhere, in getItem. I keep getting the error, "Uncaught TypeError: this.showPopup is not a function(…)" Any help is greatly appreciated. create: function() { ... popup = game.add.sprite(window.innerWidth/2, 200, 'box'); ... }, update:function (){ game.physics.arcade.overlap(player, cake, this.getItem); }, getItem:function(player,item) { console.log('got ' + item); item.kill(); this.showPopup("test"); }, showPopup: function(t){ popup_timer = game.time.create(false); popup_timer.add(1000, this.hidePopup, this); popup.text = t; tween = game.add.tween(popup.scale).to({x:1,y:1},500, Phaser.Easing.Elastic.Out, true); popup_timer.start(); }, hidePopup: function(){ tween = game.add.tween(popup.scale).to( { x: 0.0, y: 0.0 }, 500, Phaser.Easing.Elastic.In, true); }

Hey everyone I am building a game on top of the babylon engine and I keep all babylon objects inside the meta "game object". I am having trouble with the scope of the variables when performing event related animations, sometimes it works sometimes it does not... And I have not idea why. I was playing around with the sky material tutorial http://www.babylonjs-playground.com/#E6OZX#6, that has some key binding to control the daylight. var setSkyConfig = function(property, from, to) { var keys = [{ frame: 0, value: from }, { frame: 100, value: to }]; var animation = new BABYLON.Animation("animation", property, 100, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT); animation.setKeys(keys); scene.stopAnimation(skybox); scene.beginDirectAnimation(skybox, [animation], 0, 100, false, 1); }; window.addEventListener("keydown", function(evt) { switch (evt.keyCode) { case 49: setSkyConfig("material.inclination", skyboxMaterial.inclination, 0); break; // 1 case 50: setSkyConfig("material.inclination", skyboxMaterial.inclination, -0.5); break; ... So that is working fine. But now if I want to animate a sphere called lightSphere0 without creating a nested function (with direct reference inside it) like above, animation only work if I put the code directly inside the switch, like so. case 50: setSkyConfig("material.inclination", skyboxMaterial.inclination, -0.5); var keys = [{ frame: 0, value: lightSphere0.position.x }, { frame: 100, value: 30 }]; var animation = new BABYLON.Animation("animation", "position.x", 100, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT); animation.setKeys(keys); scene.stopAnimation(lightSphere0); scene.beginDirectAnimation(lightSphere0, [animation], 0, 100, false, 1); If i try to call any function outside of this switch with the object as an argument, or with its name, or with the scene object etc.. the animation runs without changing the property of the object. For example those following functions are methods of the meta object (that i call with thisObject.animateFloat(sphere, "position.x", ... , ....). So I get the OK, in the console (I get in fact 4 of them, not sure why), and everytime I have a correct reference to the object in the debugger. But the animation does not work... animateFloat(object, property, from, to) { var keys = [{ frame: 0, value: from }, { frame: 100, value: to }]; var animation = new BABYLON.Animation("animation", property, 100, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT); animation.setKeys(keys); this.currentSceneObject.stopAnimation(object); // edit, what was missing : object.animations.push(animation); object._scene.beginAnimation(object, 0, 100, false, 1, function() { console.log("ok") }); //this.currentSceneObject.beginDirectAnimation(object, [animation], 0, 100, false, 1); }; animateVector3(objectName, property, from, to) { var keys = [{ frame: 0, value: from }, { frame: 100, value: to }]; var sphere = this.currentSceneObject.getMeshByName(objectName); var animation = new BABYLON.Animation("animation", property, 100, BABYLON.Animation.ANIMATIONTYPE_VECTOR3, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT); animation.setKeys(keys); this.currentSceneObject.stopAnimation(sphere); // edit, what was missing : object.animations.push(animation); this.currentSceneObject.beginAnimation(object, 0, 100, false, 1, function() { console.log("ok") }); //this.currentSceneObject.beginDirectAnimation(object, [animation], 0, 100, false, 1); }; On the other hand if I create a function without animation, and change the position manually, it does work. For example if I change the code of the above function to : animateVector3(object, property, from, to) { object.position.x = 50; } the object is moving... Sorry for the long post ! Do you have any clue as to what is going on ? Im lost... Thanks !

Hi people, I've recently just started using the Phaser framework 2 days ago and I am developing my first game, an RPG with phaser...I recently just ran into an issue in my character select state where my scope(this) becomes the window scope and does not recognize my internal functions. Any insight on my issue would be extremely helpful. thank you!!!

Hello everyone, I just started Phaser, and I am trying to get a sprite to change on button click: create: function() { this.game.button = this.game.add.button(this.game.world.centerX-450, 660, 'button', this.nextPage(this.currentLevel, 0), this, 2, 1, 0); this.game.button.anchor.setTo(0.5); this.game.button.input.useHandCursor = true; this.game.button.input.priorityID = 0; this.game.sprite2 = this.game.add.sprite(this.game.world.centerX-475, this.game.world.centerY-20, 'button-comb'); this.game.sprite2.anchor.setTo(0.5); } Here is the nextPage code: nextPage: function(level, buttonNo) { if (buttonNo==0) { this.game.sprite2.visible=false; } } But every time I run this, it says 'Uncaught TypeError: Cannot set property 'visible' of undefined'. I have no idea what I am doing wrong. Please help me out! Much appreciated ____ MAK

Hello ! I really want to read the source code of phaser, but I am not that professional. the namespace Phaser is declared inside a function, so I am wondering how we can access it outside it ? (function(){ var Phaser = Phaser || {}; }).call(this); Phaser.something = 5; //Reference error, Phaser is not declared what things I ca learn to read the source code perfectly and have this awesome experience ?

Hello, I am working on implementing drag and drop in my scene. I have a sphere being created successfully. But when I click on it (mouse down), I do not get the expected drag behavior. I am basically working from the example and I can even reproduce the example in an "in situ" text fixture (i.e. Visual Studio hosted standalone HTML page). Both work equally well. Next, I want to connect the drag and drop stuff with a jQuery "scene:created" trigger. This is potentially where things fall over. I do not get the pointer down event, for starters, that I think I should be getting. I have verified that the trigger is indeed happening. Here is my on trigger event handler: var sceneCreatedDragAndDropHandler = function(e, args) { var startingPos = null; var currentMesh = null; var s = args._scene; var c = args._canvas; var camera = s.getCameraByName("arc1"); var getGroundPosition = function() { /* use a predicate to get position on the ground */ var pi = s.pick(s.pointerX, s.pointerY, function(m) { return !(/^role-/.test(m.name)); }); return pi.hit ? pi.pickedPoint : null; } var onPointerDown = function(event) { if (event.button !== 0) { return; } /* check if we are under a mesh */ var pi = s.pick(s.pointerX, s.pointerY, function(m) { return /^role-/.test(m.name); }); if (pi.hit) { currentMesh = pi.pickedMesh; startingPos = getGroundPosition(); if (startingPos) { /* we need to disconnect camera from canvas */ setTimeout(function() { camera.detachControl(c); }, 0); } } } var onPointerUp = function() { if (startingPos) { camera.attachControl(c, true); startingPos = null; } } var onPointerMove = function() { if (!startingPos) { return; } var currentPos = getGroundPosition(); if (!currentPos) { return; } var deltaPos = currentPos.subtract(startingPos); currentMesh.position.addInPlace(deltaPos); startingPos = currentPos; } c.addEventListener("pointerdown", onPointerDown, false); c.addEventListener("pointerup", onPointerUp, false); c.addEventListener("pointermove", onPointerMove, false); }; I have confirmed all the other bits are working. Canvas, scene, etc, are all rendering okay. The only thing I can figure is that somehow the scope is an issue, even though I am capturing the handler in a global variable, and that the JavaScript GC is collecting the guts of it. If that's the case and it's a GC issue, I wonder what the best way to capture which elements would be. Things like the event handlers, positions, etc, off the cuff. Suggestions?

Hey there, I'm new to javascript and I'm trying to figure out how to create a global singleton for generic functions. I can create global variables in the Boot state, but I'd like to create an object that holds global vars and functions. I'm instancing a custom GameManager script in the index.html file like so: //initialize framework var game = new Phaser.Game(640, 960, Phaser.AUTO, 'game'); //create global object var gameManager = new GameManager(); My GameManager.js file looks like this: var GameManager = function GameManager() { console.log('game manager created'); this.myName = "adrian"; this.GetName = function() { console.log("my name is "+this.myName); } }; The problem is gameManager object is undefined elsewhere in game. Any suggestions? Thanks

Hi guys, I am a new member to this community and entirely new to HTML5 game development. I came across Pandajs on my search for a viable 2D game engine with which I can pick up and excel my skills in HTML5 game development. Thanks to enpu for making this game engine! The below links and examples from github helped me to overcome issues during my initial stages of development. Like adding Sprite, Animations and Containers and also creating Modules and Classes. Even though I was able to achieve these, there are these couple of concepts which I am still unclear of and need help from someone to completely understand. I searched through the forums and also blogs to get some idea, but got lost. Finally I decided to post it here. What I would like to understand is 1. The structure of the game engine. The classification of game.module(), .body(function(){}), game.createScene() and others in it. 2. The relation of game.scene, this.body, shape, world and so on. Is it necessary to have all of these? If so, why? 3. If there is difference between game engine version 1 & 2 with regards to the structure? I would be very happy and thankful if someone can help me clear these doubts. Let me know as to where I can find/read the basics of HTML5 game devleopment, especially on Pandajs. Sorry to ask these questions if it has already been answered in this forum. Links I went through http://www.pandajs.net/cheatsheet/ http://vermeire.home.xs4all.nl/panda/index.html http://www.emanueleferonato.com/2014/03/05/look-at-panda-js-html5-game-engine-capabilities-with-a-working-game-prototype/ http://www.ninjadoodle.com/blog/tag/pandajs/

Anther WTF moment with Typescript. It is similar to a previous problem I had, but doesn't have the same solution. Could someone explain this, please? module TestGame{export class StateSettingStage extends Phaser.State { sally: TargetSprite; //subclass of Phaser.Sprite shoes: Token; //subclass of Phaser.Sprite this.sally = new TargetSprite(this.game, 350, 20, "sally"); this.game.add.existing(this.sally); this.shoes= new TargetSprite(this.game, 350, 20, "shoes"); this.game.add.existing(this.shoes); ->this.shoes.setTargetSprite(this.sally); <--- No problem this.clothes.children.forEach(function (val: Token) { val.anchor.setTo(0.5, 0.5); //val.setTargetSprite(this.sally); <-- this is what I really wanted to do, but...-> this.shoes.setTargetSprite(this.sally); <-- this.shoes and this.marry are undefined! }) }}Why are "shoes" and "sally" undefined when within the foreach callback function? I checked, and there is no argument I can use to pass these variables to the callback function (not that I should need to anyway, because they are within scope!)

Hi, I'm trying to create a small javascript app which loads a JSON url and displays some html and divs based on the JSON data. It's got to be as small as possible so without using a frameworks like Phaser and jQuery. The javascript scope of variables is a bit tricky, and I'm having some trouble getting it to work properly. My question is, how can create the MyGame class with an imageShapes image and then reference that imageShapes in the onreadystatechange method of XMLHttpRequest? Here is my code:// namespacevar MyGame = MyGame || { gamedata: [], test123: 'This is a test value 123'};// game objectMyGame.start = function (jsonfilename) { // initialise image this.imageShapes = new Image(); // add gamedata and populate by loading json this.gamedata = []; this.test123 = 'This is a test value 123'; this.loadJSON( jsonfilename, this.onJSONsuccess, // <- function to call on successfully loaded JSON this.onJSONerror );}MyGame.start.prototype = { // load a JSON file loadJSON: function(path, success, error) { console.log('TESTING loadJSON : test123='+this.imageBackground); var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState === XMLHttpRequest.DONE) { if ((xhr.status === 200) || (xhr.status === 0)) { // status 0 = local file testing if (success) success(JSON.parse(xhr.responseText)); // <- how to reference back to "MyGame" ? } else { if (error) error(xhr); } } }; xhr.open("GET", path, true); xhr.send(); }, // handle load json events onJSONerror: function(xhr) { console.log('MyGame.js - onJSONerror error loading json file'); console.error(xhr); }, onJSONsuccess: function(data) { // load data from JSON this.gamedata = data; console.log('TESTING -- data.imgshapes='+data.imgshapes+' test123='+MyGame.test123+' imageShapes='+this.imageShapes); // this.imageShapes is also undefined MyGame.imageShapes.src = 'img/mybackground.png'; // <- problem is here, imageShapes is undefined..? }};var test = new MyGame.start('js/mydatafile.json');When I try the code above, it fails in onJSONsuccess. The imageShapes cannot reference and it is undefined, even though I defined it earlier in the MyGame class. This is the error: Uncaught TypeError: Cannot set property 'src' of undefined test123.js:58