Search the Community

Showing results for tags 'event'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Coding and Game Design
  • Frameworks
    • Phaser
    • Pixi.js
    • Babylon.js
    • Panda.js
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 58 results

  1. Hey guys. The GDC ( is right behind the corner. Who's going to be there? We could have a coffee/beer together and talk how cool it is to make Html5 games:)
  2. Hi, I'm currently learning Phaser, and i need to handle key events, so i saw some tutorials and if i want to move my character, i need to know if key is down so, in the "phaser" way, things are done like this: window.checkInputs = () => { let key = Phaser.Keyboard if ( game.input.keyboard.isDown(key.LEFT) ) { console.log('Left is down !') } } And i need to call this method in the update loop, so 60 times / s, phaser will check if left arrow is down, like i come from node.js, i don't like this, i mean it waste resources no ? So, is this methode better ? : window.addInput = () => { document.onkeydown = (e) => { if (e.code == 'ArrowLeft') { console.log('Left is down !') } } } Thanks !
  3. Hey guys, I got a weird behavior from using the callback method on group.onDestroy: this.playerCar = 'car1'; this.enemyCar = 'car2'; this.optionsGroup.onDestroy.add(this.currentTrack.createCars, this, 0, this.playerCar, this.enemyCar);
  4. Hey guys, I got a weird behavior from using the callback method on group.onDestroy: this.playerCar = 'car1'; this.enemyCar = 'car2'; this.optionsGroup.onDestroy.add(this.currentTrack.createCars, this, 0, this.playerCar, this.enemyCar); and what I get on the other side instead of 'car1' and 'car2', is: [object, object] and true. I even tried using: this.currentTrack.createCars.bind(this), but it does not help Does anyone know why? Phaser version 2.6.2
  5. Is there any way to add a listener that triggers when a sprite is visible by the camera?. The object Sprite contains inCamera, but it seems to re compute the bounds of the sprite according to this:, and that can be expensive. In my case I need to do this for many sprites on the screen, so I want to know if there is a more efficient way to do it.
  6. I have a function (fire_event()) outside update(). Inside this function, I do these things: function fire_event(){ my_flag = false; do_stuff_1(); game.add.tween(sprite).to( { alpha: 1.0 }, Phaser.Timer.HALF, Phaser.Easing.Linear.None, true).onComplete.addOnce(function(){, function(){ do_stuff_2(); game.add.tween(sprite).to( { alpha: 0.0 }, Phaser.Timer.HALF, Phaser.Easing.Linear.None, true).onComplete.addOnce(function(){ my_flag = true; }, this); }, this); }, this); } function update(){ if(my_flag){ do_update_stuff(); } else { //do nothing } } Everything that need to be rendered on function do_stuff_2(), is not rendering... only when the most inner tween finishes things got rendered. Everything go rendered, till the code reaches do_stuff_2(). ------------------------------ Detailed info about do_stuff_2(): underlayer_group.removeAll(); //clear group overlayer_group.removeAll(); //clear group map_name =; //thats just a string maps[map_name].setLayers(underlayer_group, overlayer_group); //I'll provide a more details on it, but it basically add new layers to these groups hero.body.x = current_event.x_target * maps[map_name].sprite.tileWidth; //hero is a sprite. Changing it x position hero.body.y = current_event.y_target * maps[map_name].sprite.tileHeight; //hero is a sprite. Changing it y position shadow.x = hero.x; //shadow is a sprite. Changing it x position shadow.y = hero.y; //shadow is a sprite. Changing it y position //reconfig world physics game.physics.p2.resume(); map_collider.body.clearShapes(); map_collider.body.loadPolygon(maps[map_name].key_name, maps[map_name].key_name); mapCollisionGroup = game.physics.p2.createCollisionGroup(); map_collider.body.setCollisionGroup(mapCollisionGroup); map_collider.body.setZeroDamping(); map_collider.body.setZeroRotation(); hero.body.collides(mapCollisionGroup); map_collider.body.collides(heroCollisionGroup); game.physics.p2.updateBoundsCollisionGroup(); Detailed info about setLayers(): setLayers(underlayer_group, overlayer_group){ this.map_sprite = game.add.tilemap(this.key_name); //set map sprite this.map_sprite.addTilesetImage(this.tileset_name, this.key_name); //set tilemap image for(var i = 0; i < layers.length; i++){ var layer = this.map_sprite.createLayer(layers[i].name); //create a layer layer.resizeWorld(); if(layers[i].properties.over != 0) //just test a property to determine which group this layer is going to make part overlayer_group.add(layer); else underlayer_group.add(layer); } } --------------------------------- In short words: do_stuff_2() removes sprites from groups, then add new layers to them, and change some sprites position. The thing is, everything inside do_stuff_2() only happens when the tween under do_stuff_2() finishes. The inner tween makes alpha channel goes from 1 to 0 immediately. Here is a working example: The problem happens always in the fade out. Fade in works. To see the problem, just get inside the "inn" house. This part of the code is inside the index.js file at root folder. Line 227, inside teleport() function. QUESTION: Does a time event inside a tween, like the example above, make things do not render excepting when everything is finished? Don`t things get rendered when I nest callbacks?
  7. Is there anyway to load textures in pixi synchronously? Something like: var texture = PIXI.Texture.fromImage("bunny.png", onComplete);function onComplete() { var bunny = new PIXI.Sprite(texture);}I tried the following: var img = new Image();img.onload = onComplete;img.src = 'bunny.png';function onComplete() { var texture = new PIXI.Texture(new PIXI.BaseTexture(img));}But the code above gives me an error. Please let me know how I can make pixi work synchronously. Thank you in advance. EDIT: I also tried: but, it also gives me an error.
  8. hi. I'm having a bit of a brain dead moment!!! I need a super simple if button is clicked restart the game state in the pause menu. (Im using the game pause as a cheat end game screen) this is the function I'm working on - all I need is to be able to click 'rePlay'. endGame: function() { = true; - 150, - 100, "game over", { font: "60px Raleway"} ); // place the reset button this.rePlay = game.add.sprite( - 150, + 100, 'rePlay'); this.rePlay.anchor.setTo(0.5, 0.5); // if replay is pushed --- this if (this.rePlay.event) { game.state.start(game.state.current);; } }
  9. I've been following the Zenva "HTML5 Mobile Game Development with Phaser" tutorial but have run into a problem. I need to call the scoreboard on collegian between the player and obstacle sprites. but when I try I get "Uncaught TypeError: scoreboard is not a constructor". Can anyone suggest how this can be fix, or a better way of going about it. = function() {}; = { create : function() { // physics engine; // player this.player = this.add.sprite(45, 200, 'player'); // obstacles this.obstacles =; this.obstacles.enableBody = true; // score text this.score =, 10, 'courier',, 20); this.startingTime = new Date(); // run the functions to create obstacles this.createObstacles(); this.nextObstacle(); }, update : function() { // time tracker var thisTime = new Date(); var diff = (thisTime.getTime() - this.startingTime.getTime())/1000; this.score.text = diff; if (, this.obstacles)) { this.endGame(); } }, shutdown : function() { }, endGame: function(player, obstacles) { player.kill(); this.obstacles.stopScroll(); this.ground.stopScroll(); this.background.stopScroll(); var scoreboard = new scoreboard(; } } scoreboard prefab :- var scoreboard = function(game) {, game); } scoreboard.prototype = Object.create(Phaser.Group.prototype); scoreboard.prototype.constructor = scoreboard; = function(score) { var bmd, background, gameoverText, startText; bmd =,; bmd.ctx.fillStyle = '#000'; bmd.ctx.fillRect(0, 0,,; background =,0, bmd); background.alpha = 0.5; this.add(background); this.y =; }; scoreboard.prototype.restart = function() { gameoverText =, 100, 'courier', 'game over', 20); gameoverText.x = - (gameoverText.textWidth /2); this.add(gameoverText); startText =, 300, 'courier', 'Play Again', 16); startText.x = - (startText.textWidth /2); this.add(startText);{y: 0}, 1000, phaser.Easing. Bounce.out, true); this,game.input.onDown.addOnce(this.restart, this); }; scoreboard.prototype.restart = function() {'Game', true, false); }; the scoreboard is basically the same as the zenva one with some small changes. i'll be altering more once I get my mead around what. but so far its not showing at all. *the prefab is linked in my index.html
  10. I feel embarrassed, but after doing a lot of research I can't seem to be able to implement this simple feature. Can anyone here who's familiar with pixi walk me through how I might accomplish this? Things I've tried... I'm trying to use .on('click', move) and then I have the move function right now set to just return the value of the pointer. I can't even get my code to return anything, let alone move the sprite. I've tried doing stage.on('click', move); and it just doesn't work. I get no errors in the console. nothing. It just doesn't work. After that, I tried creating a rectangle and using rectangle.on('click', move); I even fill in the rectangle with a color to make sure it's actually there. Nothing. my code is just unresponsive. No errors no nothing. The only time my code works is when I use the .on('click', move) on the actual sprite I'm trying to move! sprite.on('click', move). It will then return 'undefined' indicating that I at least got that far... I can provide my code if needed. But first I wanted to just check in and see what the best practice is for this, and if I'm just missing something elementary.
  11. Hi guys, So I am trying to develop and learn Phaser for educational game purposes. I have explored adding sprites/images to make a game, but now i am trying to use the Tiled program to build game levels. Can anyone tell me the best way to change/modify the player when it is touching/overlapping certain tiles? Currently I am using a single layer Tiled.json file. Trying to make a slippery/acceleration boost surface. I can change the player speed, but I can't reset it back after they leave the tiles. At the moment I am setting the collision by - map.setTileIndexCallback([95], this.slippery, this); calling a function slippery that sets my variable - playerSpeed = 500; then I need a way to set it back to slow again. Is there a leave tile function/callback? Another issue with doing it my way is that it overwrites the - map.setCollisionBetween(1,146); and the player falls through the tile. So I have had to make an invisible tile above the surface that I want to make slippery to make it work. If I am going about this all wrong please let me know.
  12. Hi, I am working on my first Phaser project and can't figure out how I should work this out well. I am build a simple JS game where I have fruits dropping and a player collecting them, whenever I collect a fruit I need it to re-spawn at a random position, which I am achieving well, but then I tried adding a timer event to the fruit, which after 5 sec of the fruit that has spawned, the player will lose the fruit and add to the missed fruit counter. I am using the P2 Physics by the way, below are parts of my code attached. //setting up the fruits fruits =; fruits.enableBody = true; fruits.physicsBodyType = Phaser.Physics.P2JS; //creating the fruit scale, position and anchor fruit = fruits.create(this.rnd.realInRange(50,800), this.rnd.realInRange( 50, 50), 'cherry'); fruit.body.setCircle(30); fruit.scale.setTo(0.1,0.1); fruit.anchor.setTo(0.5, 0.5); = 2; * 5, fruitMissed, this.fruit); //set collision group fruit.body.setCollisionGroup(fruitCollisionGroup); // setting to which grps the fruit can collide fruit.body.collides([fruitCollisionGroup, playerCollisionGroup]); fruit.body.collides(rockCollisionGroup, fruitHitRock, this); I am adding a time event to the fruit, which will call the fruitMissed function after 5 sec, which will de-spawn and collect the fruit, add score and will reset the position of the fruit, but whenever I reset the position I want to attach a timer again which I am unable to. Below is the fruitCollected function, where I need to respawn the fruit again. . function fruitCollected (body1, body2) { console.log('Fruit Collected'); body2.reset(this.rnd.realInRange(900, 50), 35); //increase the score score += 50; scoreText.text = 'Score: ' + score; } What are your thoughts on how I should tackle this. Thanks
  13. Hello. I started learning pixi a week ago. I easily managed to create sprites, but couldn't set up event handlers. Now I think that the problem is in latest release of pixi. Example: - sprites are clickable - only 'mouseover' events are working Should I switch to previous version, or set up handlers differently?
  14. I'm unable to remove event listener from a particular sprite in consideration. Please refer the following code and the comments for more details: TheGame.prototype={ //..more code here create: function() { game.scale.pageAlignHorizontally = true; game.scale.pageAlignVertically = true; this.createLevel(); }, createLevel: function() { var nodeCounter = 1; for (var i = 1; i <= gameOptions.rows; i++) { for (var j = 1; j <= gameOptions.cols; j++) { this.addNode(i, j, nodeCounter); } } }, addNode: function(x, y, c) { var node = game.add.sprite(100 * x, 100 * y, "node"); node.belongsTo = null; node.coordinate = new Phaser.Point(x, y); node.pos = c; nodes[c - 1] = node; node.inputEnabled = true; //On mouse down 'assignNode()' is called, node); //But on mouse up 'assignNode()' is not removed from the listener, node); } } TheGame.assignNode = function(node) { //does something } Thanks & Regards
  15. Interested if anybody is going to attend?
  16. Hi guys, I would like to ask about group events and position that I assigned manually. If there a clean way to approach this? this.mouth1 = this.mouthGroup.create(150, 40, 'mouth1'); this.mouth1.inputEnabled = true; this.mouth1.input.enableDrag();, this);, this); this.mouth1.scale.setTo(0.5); this.mouth1.anchor.setTo(0.5); this.mouth2 = this.mouthGroup.create(150, 120, 'mouth2'); this.mouth2.inputEnabled = true; this.mouth2.input.enableDrag();, this);, this); this.mouth2.anchor.setTo(0.5); this.mouth2.scale.setTo(0.5); this.mouth3 = this.mouthGroup.create(150, 200, 'mouth3'); this.mouth3.inputEnabled = true; this.mouth3.input.enableDrag();, this);, this); this.mouth3.anchor.setTo(0.5); this.mouth3.scale.setTo(0.5); etc....
  17. I found there are two different approaches on how to pause game. game.pause = true; efectively pauses all subsystems in the game including the buttons, so I cannot press on them if this property is set to true. Yes I found this example which calculates where you pressed and if the click was on the pause btn it unpauses the game. I have just two sprites with two text objects above them. They move as text boxes togheter and fall down to the ground. Once they reach(hit) the ground the game is over. I also found this property Physics.Arcade.isPaused which I cannot find in Phaser 2.2.2 documentation and my browser as well tells me that this property does not exits. What is the best way to stop two text boxes to fall down when I press a pause button but being able to press that button again? Should I use some hacks like remove update function and then add it again or something like set sprite velocity to 0 and then revert it back again to 100.?
  18. Could someone please tell me how to capture a touch event in phaser? game.input.mouse.onMouseMove = function (evt) { rabbit.x = evt.offsetX - (rabbitWidth / 2);}; The above code works perfectly on a normal screen, but does bugger-all on my iPhone. I see Pixi has some mouse support. I'm looking for the touch position. Help appreciated.
  19. Hello, I would like with my 'dbclick' event function recover pickingInfo like the function onPointerDown. How can do I ? I would like recover the mesh informations. I saw that there was another way to place an event on a mesh. More suitable for my case I think. My problem with this method is that I can not access variables in my class... this._machine.actionManager = new BABYLON.ActionManager(scene); this._machine.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickUpTrigger, function () { alert("machine cliqued"); alert("this._privateAttribut"); //undifined }));
  20. I have a sprite with .useHandCursor = true and events.onInputOver.add(this.OnMouseOver, this); BUT: If the mouse is already over the sprite I have to move it out and back again for the event to trigger. Now this is not a problem becouse I can rectangle.contain check the mouse cursors position when my button shows but that is only a graphical change. I need to also change the cursor to pointer. I also got this to work but I have to move the cursor (atleast 1 pixel) for the cursor to change. Is this a browser/html thing? If not how could I instantly change the cursor?
  21. Hello! I want to capture when exactly a pointer is pressed and released (when its isUp and isDown change values). I also want to get the id of the pointer. I tried with the start() and stop() methods of the pointer, but for some reason they need a DOM event as a parameter, which in my situation is completely useless, I think. Why can't I pass my own function, so that those methods can call it... EDIT: I tried to use game.input.onDown() and game.input.onUp() and then loop through game.input.pointers to see which pointer is pressed/released. However, the engine is silly again... The onDown event is dispatched after isUp and isDown are changed, but onUp is dispatched before they are changed. I don't see any logic in this. It's kind of OK now, but I see a pointer as released only after another pointer is released. And I get when that other pointer is released when a third one gets released. It's ridiculous. In version 2.4.2 (an older version - before 2.4.4, which I'm using), the onUp event is dispatched correctly, which is even more interesting.
  22. Good afternoon everyone, I'm having some problems fitting Phaser inside a responsive div. I have already achieved this with bootstrap, but this project requires flexbox -- and it's not working as intended. I have noticed that when Phaser is injected in a div inside a flexbox container, the resize event is not fired when the window changes size. I have tried fitting it in a div with "position: absolute" that follows x, y, width and height properties of the flexbox item, but with no success. Has anyone tried this before? Maybe it's something trivial that I'm missing. Thanks in advance, Pedro Antoninho
  23. I am pretty new to Phaser and enjoy it very much, and also use cocoonjs to test on a mobile device. If I have any game.input event - like "game.input.onDown.add (function)" etc, in the update function, after a minute or so of no activity (on the mobile) my framerate goes through the floor. I am wondering why this might be. I can add a timer to test for activity and pause the game, but I am curious if I am doing something wrong. Below, is my html file - if I zip the html and phaser.min file, and open it on my iPhone and don't do anything it starts at 60fps. Then after about a minute or so of inactivity, the framerate drops to 20+ Tested on various Phaser versions, including 2.4.4 <doctype html> <html> <head> <meta/> <title>test</title> <script src="phaser.min.js"></script> <body> <script type="text/javascript"> var game = new Phaser.Game(320, 480, Phaser.AUTO, '', { preload: preload, create: create, update: update }); function preload() { } function create() { } function update () { game.input.onTap.add(function(){ console.log("tapped") }); } </script> </body> </html>
  24. Hi, I am creating my first game for the web (I created for android with CocoonJS) and I find the problem of the orientation of the device, my game is in landscape mode, and I watched that "there can be locked to a single perspective "you should listen and react to the event, but really do not know how to implement it, and try cSS, someone has a method that works (please, no phaser) only JS.
  25. Hello ! At first : I'm not good in english writing and speeking, sorry for the quality of the language ... I'm new in javascript, and I wanted to write a little game. After days of searching and reading, I choose pixi.js. I write an object named Hexagone, witch contains a PIXI.Graphics named hex that I want to be interactive. in this object I create an hitArea into hex and I had a function (line 81) I want that when I click on one figures that the console print the x and y coordonate of the hexagone, but it always print 0, 0, can you explain me why ? Here is the code, thanks for your attention function jeu(){ console.log(PIXI); var renderer = PIXI.autoDetectRenderer(600, 600,{antialias: true, transparent: false, resolution: 1}); document.getElementById("pixi").appendChild(renderer.view); var stage = new PIXI.Container(0xFFFFFF); //var background= new PIXI.Sprite.fromImage('prairie-verte-1_2997580.jpg'); var param = { l : 60, calcule : function(){ this.h= this.l*0.45; this.x1 = this.l/4; this.y1 = 0; this.x2 = this.l*3/4; this.y2 = this.y1; this.x3 = this.l; this.y3 = this.h; this.x4 = this.x2; this.y4 = this.h*2; this.x5 = this.x1; this.y5 = this.h*2; this.x6 = 0; this.y6 = this.h; }, }; param.calcule() function Hexagone(x,y) { this.x=x; this.y=y; if(this.x%2 == 0){ this.xBase = this.x*3*param.l/4; this.yBase = this.y*2*param.h } else{ this.xBase = this.x*3*param.l/4; this.yBase = (this.y+1/2)*2*param.h } } Hexagone.prototype.dessiner = function(){ this.hex = new PIXI.Graphics(); this.hex.beginFill(0x00FF00); this.hex.lineStyle(1, 0x000000); this.hex.moveTo(this.xBase + param.x1, this.yBase + param.y1); this.hex.lineTo(this.xBase + param.x2, this.yBase + param.y2); this.hex.lineTo(this.xBase + param.l/2, this.yBase + param.h); this.hex.endFill(); this.hex.beginFill(0x00FF00); this.hex.moveTo(this.xBase + param.x2, this.yBase + param.y2); this.hex.lineTo(this.xBase + param.x3, this.yBase + param.y3); this.hex.lineTo(this.xBase + param.l/2, this.yBase + param.h); this.hex.endFill(); this.hex.beginFill(0x00FF00); this.hex.moveTo(this.xBase + param.x3, this.yBase + param.y3); this.hex.lineTo(this.xBase + param.x4, this.yBase + param.y4); this.hex.lineTo(this.xBase + param.l/2, this.yBase + param.h); this.hex.endFill(); this.hex.beginFill(0x00FF00); this.hex.moveTo(this.xBase + param.x4, this.yBase + param.y4); this.hex.lineTo(this.xBase + param.x5, this.yBase + param.y5); this.hex.lineTo(this.xBase + param.l/2, this.yBase + param.h); this.hex.endFill(); this.hex.beginFill(0x00FF00); this.hex.moveTo(this.xBase + param.x5, this.yBase + param.y5); this.hex.lineTo(this.xBase + param.x6, this.yBase + param.y6); this.hex.lineTo(this.xBase + param.l/2, this.yBase + param.h); this.hex.endFill(); this.hex.beginFill(0x00FF00); this.hex.moveTo(this.xBase + param.x6, this.yBase + param.y6); this.hex.lineTo(this.xBase + param.x1, this.yBase + param.y1); this.hex.lineTo(this.xBase + param.l/2, this.yBase + param.h); this.hex.endFill(); this.hex.hitArea = new PIXI.Polygon([ new PIXI.Point(this.xBase + param.x1,this.yBase + param.y1), new PIXI.Point(this.xBase + param.x2,this.yBase + param.y2), new PIXI.Point(this.xBase + param.x3,this.yBase + param.y3), new PIXI.Point(this.xBase + param.x4,this.yBase + param.y4), new PIXI.Point(this.xBase + param.x5,this.yBase + param.y5) ]); this.hex.interactive = true; =function(data){console.log("click x :"+this.x+" y : "+this.y)}; stage.addChild(this.hex); } listeHexa=[]; for(var y=0;y<10;y++){ for(var x=0;x<10;x++){ hexa = new Hexagone(x,y) hexa.dessiner() listeHexa.push(hexa); } } renderer.render(stage); update(); function update(){ requestAnimationFrame(update); renderer.render(stage); }; }