Search the Community

Showing results for tags 'event'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • 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 69 results

  1. Click event on sprite

    Basically I am making a cookie clicker type game for fun. I am trying to make the counter increase each time the sprite is clicked on but for some reason the click event on the sprite is never fired if i click on the sprite. I can't figure out why the click event isn't firing does anyone know why? Or a better way of doing this? <!doctype html> <html> <head> <meta charset="UTF-8" /> <title>Shook Clicker</title> <script src="https://cdn.jsdelivr.net/npm/phaser-ce@2.9.1/build/phaser.js"></script> </head> <body> <script type="text/javascript"> var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update }); var clicker; var clicks = 0; var scoreText; function preload() { game.load.image('clicker', 'assets/cookie.png'); } function create() { clicker = game.add.sprite(game.world.centerX, game.world.centerY, 'clicker'); clicker.anchor.set(.5); clicker.scale.setTo(.1,.1); clicker.inputEnable = true; scoreText = game.add.text(16,16, 'Computers Built: 0', {fontSize:'32px', fill: '#555'}); clicker.events.onInputDown.add(listener, this); } function listener() { clicks++; scoreText.text = 'Computers Built: ' + clicks; } function update() { } </script> </body> </html>
  2. Hi everybody: I need to know about what is the preferred approach to handle the mouse/touch events (for example onclick): (1) via the canvas by means of myCanvas.addEventListener("pointerdown", function (evt) { ... var pickInfo=myScene.pick(myScene.pointerX,myScene.pointerY,function(mesh){ return (mesh===myMesh); }); if(pickInfo.hit){ alert("Mesh picked"); } }); (2) via the mesh using the powerful ActionManager functionality myMesh.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickDownTrigger,function(evt){ alert("Mesh picked"); })); Thank you for your time.
  3. Can anybody explain me why pointer event (mouse and touch events) does not work in Edge browser ? It Works well with Chrome FireFox Opera! What is difference? Is there any better way to handle (mouse and touch events) in all browser same? You can try and see difference between Edge and Chrome/Fierefox/Opera in this example/game. (here I use hand.min.js) Is there any better alternative of hand.min.js ??? Is there any bug in Edge browser or BabylonJS's hand.js? https://ajna4taiga.tk/PerplexusShadowOpen/PerplexusProd.html Edge problem: When I release any of WSAD key it has longer delay only in Edge (Windows) Browser. Is there any batter way to handle (mouse/touch evnets) with javascript? greetings Ian
  4. I have a group of meshes that have OnPointerOverTrigger events. When I mouse over them the event triggers. However, when I mouse over them while they are behind another object that has no events, the OnPointerOverTrigger still triggers. Is there a simple way to make OnPointerOverTrigger not trigger when the mesh is behind another mesh?
  5. Yesterday i add simple GUI buttons to my game. I have problem with pointer event, when i click to button pointer event send data with selected mesh (I think about ground instead button) and now i logic of my game, if i select ground player move to this point. Is possible to block pointer event when i click to my button? Tom
  6. Detecting Any key pressed

    Hi, In a menu state of mine, instead of pressing spacebar, I would like to let the player press any key to continue. What would be the best way to detect if any key is pressed?
  7. Hi, I have several buttons in my game and I want them to disappear when I click on it. But it seems that the event "onInputOut" is not fired when I set the property button.visible = false in the callback function of the button. Is this a normal behaviour ? Because this causes some problems in my game logic. Is there a way to force the event "onInputOut" to be launched ? I tried button.onInputOut.dispatch() but it does not work. Thanks
  8. Hi, I did setup the LensRenderingPipeline and i noticed that the code i use for picking meshes work awkward away from the center of the screen once I enable lens distortions, if removed all is fine. I am using the pick results from scene.pick(scene.pointerX, scene.pointerY) and is only working with no distortion.
  9. Help-me

    Hello everyone ! I'm new to javascript. yet I have done some scenes in babylonjs! and I have two questions about I did a scene for training in order to better understand the babylonjs engine. and with this code: var moveLeft = false, moveRight = false; window.addEventListener("keydown", function(e) { if (e.keyCode == 65) { // A or Q65 || e.keyCode == 81 moveLeft =true; moveRight = false; } else if (e.keyCode == 68) { // D moveLeft = false; moveRight = true; } });//agora um negativo - como ta em escuta. window.addEventListener("keyup", function(e) { if (e.keyCode == 65) { // A or Q || e.keyCode == 81 moveLeft = false; } else if (e.keyCode == 68) { // D moveRight = false; } }); moves a cube and when it moves to the pressing example the letter 'A'. the browser takes this action as well and open a search bar like to know how do I that after charging a tight keys scene to be captured or something. sorry no idea how to do it. the second question, stupid means someone here already developing a game or something and published for android? how did you do it ? phonegap? what is the best way?
  10. Trouble with collission

    I am trying to make a simple game where you are a ball and have to avoid objects. My code is available here: https://jsfiddle.net/skpvjoxb/ My problem is in line 69: I try to make collission between the player (sprite) and one of the enemies (enemy), but it doesn't work. Anyone can figure out how to make collission between enemy and sprite/player? Thank you so much
  11. 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 !
  12. GDC 2017

    Hey guys. The GDC (http://www.gdconf.com/) 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:)
  13. 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
  14. group.onDestroy.add - cannot pass arguments

    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);
  15. 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(){ game.time.events.add(Phaser.Timer.HALF, 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 = current_event.target; //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: https://jjppof.github.io/goldensun_html5/index 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?
  16. Event listener for sprite in camera

    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: http://www.html5gamedevs.com/topic/8936-does-phaser-handle-object-visibility-according-to-camera/, 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.
  17. simply click button to restart

    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() { this.game.paused = true; this.game.add.text(this.game.world.centerX - 150, this.game.world.centerY - 100, "game over", { font: "60px Raleway"} ); // place the reset button this.rePlay = game.add.sprite(this.game.world.centerX - 150, this.game.world.centerY + 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);; } }
  18. 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. vaultage.game = function() {}; vaultage.game.prototype = { create : function() { // physics engine this.game.physics.startSystem(Phaser.Physics.ARCADE); // player this.player = this.add.sprite(45, 200, 'player'); // obstacles this.obstacles = this.game.add.group(); this.obstacles.enableBody = true; // score text this.score = this.game.add.bitmapText(700, 10, 'courier', this.game.time.totalElapsedSeconds(), 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.game.physics.arcade.collide(this.player, 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(this.game); } } scoreboard prefab :- var scoreboard = function(game) { Phaser.Group.call(this, game); } scoreboard.prototype = Object.create(Phaser.Group.prototype); scoreboard.prototype.constructor = scoreboard; score.prototype.show = function(score) { var bmd, background, gameoverText, startText; bmd = this.game.add.bitmapData(this.game.width, this.game.height); bmd.ctx.fillStyle = '#000'; bmd.ctx.fillRect(0, 0, this.game.width, this.game.height); background = this.game.add.sprite(0,0, bmd); background.alpha = 0.5; this.add(background); this.y = this.game.height; }; scoreboard.prototype.restart = function() { gameoverText = this.game.add.bitmapText(0, 100, 'courier', 'game over', 20); gameoverText.x = this.game.width/2 - (gameoverText.textWidth /2); this.add(gameoverText); startText = this.game.add.bitmapText(0, 300, 'courier', 'Play Again', 16); startText.x = this.game.width/2 - (startText.textWidth /2); this.add(startText); this.game.add.tween(this).to({y: 0}, 1000, phaser.Easing. Bounce.out, true); this,game.input.onDown.addOnce(this.restart, this); }; scoreboard.prototype.restart = function() { this.game..state.start('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
  19. 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.
  20. Phaser with TileMap events

    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.
  21. Collision Groups and Timers

    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 = game.add.group(); 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); fruit.body.data.gravityScale = 2; fruit.game.time.events.add(Phaser.Timer.SECOND * 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
  22. 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: http://pixijs.github.io/examples/index.html?v=v4.0.3#/demos/interactivity.js - sprites are clickable http://pixijs.github.io/examples/index.html?v=v4.1.0#/demos/interactivity.js - only 'mouseover' events are working Should I switch to previous version, or set up handlers differently?
  23. 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.events.onInputDown.add(TheGame.assignNode, node); //But on mouse up 'assignNode()' is not removed from the listener node.events.onInputUp.remove(TheGame.assignNode, node); } } TheGame.assignNode = function(node) { //does something } Thanks & Regards
  24. Pocket Gamer Connects Helsinki 2016

    http://www.pgconnects.com/helsinki/ Interested if anybody is going to attend?