Search the Community

Showing results for tags 'speed'.

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 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 29 results

  1. Hello everyone, I just upgraded my project from Phaser CE to Phaser 3 (latest beta) and I noticed that framerate has dropped down dramatically. I know that version 3 is using custom renderer and not Pixi, but as I understand, the WebGL version should have similar performance as the original Pixi renderer. I have just a single isometric scene with 64x64 tile sprites, every sprite is 80x40 and there are 128 single textures. Before upgrade, I got solid 50-60 FPS, now I can barely move the camera without FPS dropping under 15 FPS. Has anyone actually tested the rendering performance of Phaser 3? Thank you for any hint, Have a nice day, Max.
  2. I had a huge loading performance a couple days ago. I have gotten past it now but it seems like something you should know about. I was trying to load a *lot* of meshes, say up to 20,000, and ran into a serious wall below that. The time for the first render completion was over a minute. I did the most practical thing, hit pause a few times to see what the system was doing. My system was spending all of its time in a FOR loop in Material.prototype._markAllSubMeshesAsDirty. (Attach 1) getScene().meshes is all of my meshes, so this was a long FOR loop. The plot thickens because it was a downstream side-effect of another FOR loop Scene._evaluateActiveMeshes. This FOR loop was also the length of all of my meshes. So, my first render was blocked by an n-squared algorithm that evaluating dirtiness. Lots and lots of dirtiness. I got past this with a hack, initially. I disabled Material.prototype._markAllSubMeshesAsDirty for the *first* *render* only. No ill effects. Later, I started merging meshes. Let me tell you, the mesh merging is the bomb! It changed everything for my application. Instances, yawn. Clone, snore. Merging killed it. I do 3-d graphs and there are a lot of similar meshes (everything is a hexagon, for starters). In my tests, I could reduce independent mesh count by a factor of twenty. Now I am loading 150K hexes fast and with good frame rate. I archived the original problem child at
  3. Hello, I'm having a bit of trouble working out how I can dynamically change the animation speed, while still maintaining the current frame the animation is up to when I make the change. See demo here When the speed changes I would hope that the current frame was not affected, so I can ramp down to a period of slow motion then resume back to normal speed I suspect I might be mutating the wrong variable to change the speed, but I can't work out what might fix it
  4. Speed and Frame Rate

    I am trying to fix the speed and framerate for Link if someone have any idea for doing computations, speed = function(framerate) for example Here is the code : var game; var map; var layer, layer1, layer2; var player; var cursors; game = new Phaser.Game(800, 600, Phaser.CANVAS, 'Zelda Mysteries of PhaserIO', { preload: preload, create: create, update: update, render: render }); function preload() { game.load.tilemap('zelda', '', null, Phaser.Tilemap.TILED_JSON); game.load.image('tiles', ''); game.load.spritesheet('link', '', 24, 32, 55); } function create() { //World map = game.add.tilemap('zelda'); map.addTilesetImage('light_world.tiles', 'tiles'); currentTile = map.getTile(2, 3); layer = map.createLayer('Calque de Tile 1'); layer = map.createLayer('Calque 2'); //Player player = game.add.sprite(50, 150, 'link'); player.scale.set(2); player.smoothed = false; player.animations.add('right', [0, 1, 2, 3, 4, 5, 6, 7], 20, false); player.animations.add('up', [12, 13, 14, 15, 16, 17, 18], 8, false); player.animations.add('left', [33, 34, 35, 36, 37, 38, 39, 40], 8, false); player.animations.add('down', [44, 45, 46, 47, 48, 49, 50, 51], 8, false); game.physics.enable(player, Phaser.Physics.ARCADE);; cursors = game.input.keyboard.createCursorKeys(); } function update() { player.body.velocity.x = 0; player.body.velocity.y = 0; var speed = 200; if (cursors.right.isDown) { += 4; player.body.velocity.x = +speed;'right'); } else if (cursors.up.isDown) { -= 4; player.body.velocity.y = -speed;'up'); } else if (cursors.left.isDown) { -= 4; player.body.velocity.x = -speed;'left'); } else if (cursors.down.isDown) { += 4; player.body.velocity.y = +speed;'down'); } else { player.animations.stop(); } } function render() { game.debug.spriteInfo(player, 20, 32); }
  5. Rival Rush - Race Game

    Rival Rush Game Link: Rival Rush Game Link Available for non-exclusive licensing! Open to constructive criticism.
  6. Different player speed

    Hello, Don't know if it is a bug but players with different FPS move by different speed. I use FreeCamera. I have got 60 FPS and I move about three times slower then other player with 20 FPS. That's weird because players with lower FPS should move slowly. I guess there is some speed compensating code. Also if player is for some time in another browser window and switch to game immediately holding move button he move for a while by huge speed. Sorry for my English. Thanks!
  7. Does Babylon has any compression of .babylon file and assets? Or it doesn't. And we should enable gzip compression on server settings. Is this the only solution to compress assets and all other resources to server client our babylon.js game? greetings ian
  8. Is there a big efficiency difference, in terms of game speed/smoothness and memory usage between using a small png for entities sprites VS using a big png and scaling it down with javascript ingame?
  9. So how can I set random speed for every object, so the acquired speed will stay? Now I have defined speed as constant, but it also increases the speed of every object. SPEED = 3; this.enemies.forEachAlive(function(enemy){ enemy.body.velocity.x += Math.random(SPEED + (SPEED/2)); }); I tried first with Tanks -example style, where is defined max and min speed, but i didn't work.
  10. Hi all! I'm coding a multiplayer game with server verification and the first thing you need when doing so, is a deterministic environment. And my issue is that velocity seems not to be even remotely reliable... I made a sandbox to illustrate my issue : You can see that from frame to frame, the delta x (in px/s) is really different. I could set the x and y myself (without using velocity), but then I would loose the collision detection, which I want to use, of course. Am I using velocity wrong? Is my sandbox poorly done? Thanks a lot guys!
  11. Hi guys, After several months and tens of hours of work I released the v2 of my first game PAWs! Some of the new key features I’ve added: - Ten new cool characters that can be unlocked for FREE. Each character that you unlock comes with one or more extra lives. - I've replaced the numbers and signs with shapes for a better visibility and also because some people don't like numbers. - I’ve changed the rewards system to just hearts (that fill the health bar) and stars (which give x2 bonus for a limited time). I think it's less confusing this way. - I’ve replaced most of the sounds with cooler ones. - Full menu makeover. - Lots of optimizations. - Made game much more intuitive. Website: Google Play: App Store:!-live-to-purr/id989570749 Any feedback will be highly appreciated! Thank you!
  12. Colour Match

    Hi All, Just finished a new game, Colour Match is a simple colour matching arcade game,built using PhaserJS. The game is simple, change the tile colour to match with the falling square. Suggestions and comments are welcome. Link: This is my first game on Google play store. Play, Rate and Share the game, Have fun!!
  13. Speed the Card Game

    Speed the Card Game Description: Speed a card game also known as Spit or Slam, is very fast-paced multiplayer card game. This game supports a live online multiplayer mode.. Features: Online 2 player modeComputer playersLocal 2 player mode100's of achievements Tech: PhaserSocket.IO (server) Platforms: iOS, Android, Amazon, Windows, Facebook (web) Store links: All links: Twitter: Community: iOS: Android: Facebook: Windows (not Phaser yet, soon):
  14. Maintain speed after collision

    I have 2 bouncing balls which are bouncing off world borders and also off each other. The balls do maintain their speed when bouncing off the world borders but they lose their speed when bouncing off each other. I'd like them to maintain their speed after they collide with each other. I realise this is quite against the physics but is this doable? Here it the game implemented with p2 physics and the code below. And here is the same game implemented with arcade engine where balls are bouncing without losing the speed I switched from the arcade engine to p2 after I learned arcade can't handle collision of circular objects. var game = new Phaser.Game(480, 640, Phaser.AUTO, 'Bubble Game', { preload: preload, create: create, update: update, render: render});var b1, b2, bubble1, bubble2;function preload() {}function create() { game.stage.backgroundColor = "#000"; game.physics.startSystem(Phaser.Physics.P2JS); game.physics.p2.setImpactEvents(true); var bubbleCollisionGroup = game.physics.p2.createCollisionGroup(); game.physics.p2.updateBoundsCollisionGroup(); b1 =; b1.beginFill(0xFF0000, 1); b1.drawCircle(0, 0, 50); bubble1 = game.add.sprite( - 380, - 50); bubble1.addChild(b1); bubble1.anchor.setTo(0.5, 0.5); b2 =; b2.beginFill(0xFFFFFF, 1); b2.drawCircle(0, 0, 50); bubble2 = game.add.sprite( - 245, - 50); bubble2.addChild(b2); bubble2.anchor.setTo(0.5, 0.5); bubbles =; bubbles.add(bubble1); bubbles.add(bubble2); game.physics.p2.enable(bubbles); bubbles.forEach(function (bubble) { bubble.body.setCircle(50); bubble.body.setCollisionGroup(bubbleCollisionGroup); bubble.body.collides([bubbleCollisionGroup, bubbleCollisionGroup]); }); var bubbleMaterial = game.physics.p2.createMaterial('bubbleMaterial'); var worldMaterial = game.physics.p2.createMaterial('worldMaterial'); bubble1.body.setMaterial(bubbleMaterial); bubble2.body.setMaterial(bubbleMaterial); game.physics.p2.setWorldMaterial(worldMaterial, true, true, true, true); var contactMaterial = game.physics.p2.createContactMaterial(bubbleMaterial, worldMaterial); contactMaterial.friction = 0; contactMaterial.restitution = 1.0; bubble1.body.damping = 0; bubble1.body.velocity.x = 200; bubble1.body.velocity.y = -200; bubble2.body.damping = 0; bubble2.body.velocity.x = -100; bubble2.body.velocity.y = 250;}function update() {}function render() {}
  15. Hello, I am experiminting with the Virtual Joysticks Camera and I have a scene that is relatively large. when I use the left joystick to move the camera it moves really slow, I can't figure out how to change the speed of the left joystick. The right joystick(camera rotation) rotates just fine. Thanks for the help!
  16. Hello! I have a tween animation: var speed = (playerInfoObject.engine.speed != null) ? playerInfoObject.engine.speed * 15 : 0;var tween1 = game.add.tween(myShip).to({ x: galaxyGate.x, y: galaxyGate.y}, speed, Phaser.Easing.Linear.None, true);This is an animation for a ship movement For example: I have a big tileSprite (space). When the tween starts in different points of this tileSprite the ship's speed is different too. I need to make it the same from all it's starts points. I have already tried smth. but that didn't help me =( var position = {x: myShip.x, y: myShip.y}; var target = {x: galaxyGate.x, y: galaxyGate.y}; var speed = 5000; var counter = 0; var timePrev =; var tween = game.add.tween(myShip) .to(target , speed) .onUpdateCallback(function(){ myShip.x = myShip.x; myShip.y = myShip.y; counter++; if(counter === 100){ tween.stop(); var timeNow =; var timeDiff = timeNow - timePrev; speed = speed - timeDiff; target, speed) tween.start(); } }) .start();Thank you in advance!!!
  17. It is using WebGL in both cases, and I have turned on "use hardware acceleration" in Firefox (latest version). I see the same difference in the mobile versions of Chrome and Firefox I made my site again from scratch when 3.0 came out, and the version of the site which uses the old Pixi still performs similarly in both browsers. Is there an acknowledged difference in Pixi 3.0's ability to perform in Firefox vs. Chrome?
  18. i have create mini game with collision system on it. the game about the ball bouncing on moveable player's box. all code is working well. the problem is while i move the box and hit the ball it become faster. i want the speed stay as it what ever happen to the ball. here is my code: game.physics.arcade.enable(box);game.physics.arcade.enable(ball); box.body.immovable = true; box.anchor.setTo(0.5, 0.5); ball.anchor.setTo(0.5, 0.5); ball.body.collideWorldBounds = true; ball.body.bounce.setTo(1, 1);ball.body.velocity.setTo(150, -150); this as reference, try to push the ball using the alien, it is what i mean by the speed is changing.
  19. Hi, I want to follow a sprite with another, but when the first sprite move quickly, the second is shifted. It is visible on the screen and in the logs (x/y position in each iteration of the update function). When the first sprite slow down, the shift is reduced. When it stop, the sprite are at the same position (it’s normal). How to do the positions of the two elements remain the same every time? I have make a live example here :,output Lose focus to do “pause” and watch positions and images. Sorry for my bad english. My example code : var red_ball=null, green_ball=null;var MainState={ preload: function(){ this.load.image('red_ball', ''); this.load.image('green_ball', ''); }, create:function() { this.time.advancedTiming = true; this.physics.startSystem(Phaser.Physics.P2JS); this.physics.p2.setImpactEvents(true); this.physics.p2.defaultRestitution = 0.8; red_ball = this.add.sprite(100, 100, 'red_ball'); this.physics.p2.enable(red_ball); red_ball.enableBody = true; red_ball.physicsBodyType = Phaser.Physics.P2JS; red_ball.scale.set(2); red_ball.body.setCircle(8); red_ball.body.collideWorldBounds = true; red_ball.body.fixedRotation = true; red_ball.anchor.setTo(0.5, 0.5); red_ball.body.angle = 90; red_ball.body.moveForward(3000); green_ball = this.add.sprite(100, 100, 'green_ball'); green_ball.scale.set(2); green_ball.anchor.setTo(0.5, 0.5); }, update: function(){ green_ball.x = red_ball.x; green_ball.y = red_ball.y; }, render: function() { || '--', 2, 14, "#00ff00");'Green ball: x: ' + green_ball.x + ' - y: ' + green_ball.y, 2, 30, "#00ff00");'Red ball: x: ' + red_ball.x + ' - y: ' + red_ball.y, 2, 46, "#00ff00"); }};var game = new Phaser.Game(500, 500, Phaser.CANVAS, 'phaser-example', MainState); Thanks ! Edit: i have update my jsbin link example + a new screenshot to see the shifted:
  20. Hi All!, I am looking for a method to get a dramatic performance increase (frame per second) on fullscreen with webGL (I am working now with three.js framework) This is my game: I made it adapt to window size on browser resize events, so, you can test reducing the window to tiny size to get huge performance, and setting the window to great size (e.g. fullscreen) will make the game VERY SLOW, ok , this make sense since a small enough window will set the resolution to 640x480 or whatever, and (in my case) setting the window to fullscreen will set the resolution to 1600x900... Of course I know render the game in higher screen resolution will be make it slow since there is much more fragments to process by GPU (640x480 -> about 307200 fragments, 1600x900 -> about 1440000 fragments). But now, I am looking a way to render the game smooth (near 60fps) on fullscreen, even sacrifying quality, one approach I tried is to set the resolution of canvas (and rendering) to half widht, half height, (e.g. 800x450) and using CSS to stretch the canvas to cover all the window (all of this on fullscreen), and it didn't improve I hear about methods of postproessing via scaling (e.g. rendering on 800x450, then doing an scale) but I don't know how to use them Thanks in advance!
  21. Hi, I'm newbie in Phaser (excuse my english)... Currently I'm developing pinball game. I have created flippers (paddle) via revolute constraints and ball in P2 physics... Everything works perfect but I need to make flippers more powerfull when they hit to ball (I need ball acceleration)... currently CreatePaddle = function(game,x,y, side) {, game); this.side = side; this.flipped = false; this.sprite_two = game.add.sprite(x, y, 'paddle'); game.physics.p2.enable(this.sprite_two, true); //this.sprite_two.body.clearShapes(); if(side == 'right') { this.sprite_two.body.loadPolygon('physicsData', 'paddle2'); this.maxAngle = 30; this.pivotOffsetX = 50; this.sprite_two.scale.x *= -1; this.pivotPoint = + this.pivotOffsetX, this.sprite_two.position.y); this.pivotOffsetX = 50; } else { this.sprite_two.body.loadPolygon('physicsData', 'paddle'); this.maxAngle = -30; this.pivotOffsetX = -50; this.pivotPoint = + this.pivotOffsetX, this.sprite_two.position.y); }; this.pivotPoint.body.static = true; this.pivotPoint.body.clearCollision(true,true); this.flipperConstraint =, [this.pivotOffsetX, 0], this.pivotPoint, [0, 5]); this.flipperConstraint.upperLimitEnabled = true; this.flipperConstraint.lowerLimitEnabled = true; return this.flipperConstraint;}Ball is created like this: //ball - circlecircle = game.add.sprite(470, 300, 'circle');circle.anchor.setTo(0.5, 0.5);game.physics.p2.enable(circle, false);circle.body.setCircle(16);circle.body.fixedRotation = true;Flippers are loaded like this: this.paddle1 = new CreatePaddle(game, 270, 2390, 'left');this.paddle2 = new CreatePaddle(game, 460, 2390, 'right');But how can I add more power to ball which collide with my flipper (paddle) ? Should I create custom material for flipper or is there easier way? Thanks for answers.
  22. TileMaps changing

    Hi. I've just been profiling my game and it has been *awfully* slow to cleanup a part of a tilemap. There wasn't any indication of why it would be slow; 20x20 was snappy. 100x100 was a nightmare. And I was updating 390 tiles. Now I'm not using physics. Tilemap code updates all layers when things change so it was a loop of 100x100x390 updates in TileMap.calculateFaces. Unsure if I was doing something wrong or some such, but I don't think this is a desired functionality. I'd say - do this at most once per frame. What I did was hack it by adding "return; //collision isn't used here." in the first line. I do my collisions outside of phaser (I anyway need to store my map data and objects logic for load/save) so that's probably why this was not needed. Anyway - It'd be nice to make it simple to update multiple layers and keep the calculateFaces from firing. Maybe something like: TileMap.preventRecalculate(doPrevent); and if it's prevented and changed, you just mark it for update. Simple, I think. Thanks for the freat framework, Tim.
  23. Hi there little felas, I stumbled upon two ways to code with Phaser in OOP. Each one are diferent in how to code, and in how to structure your game. The first is the familiar Let's call it "flappy tutorial". And the second is the And this we call it "not-flappy tutorial". Well, the flappy tutorial uses a simple and easy to understand way to structure the game. He uses the objects/classes ass a simple module of code to be added to the main code, without any complication and any work to think about. In the not-flappy tutorial, I took a few seconds to understand how it works. He makes the object a extention of the Phaser.Sprite to determinate that object ass a sprite, and to add to the game, you have to add ass a existing object through Phaser.Game.add.existing and add the object ass a Phaser object. Cool huh? So, witch one of these ways make our game run smoothly? Take less time to execute? May the force be with us, so we can live long and prosper...
  24. Fast

    Hey guys, I'm not sure if it is still allowed to post non flappy bird clones, but here is my latest game: Fast. It's kind of a work in progress, as I'm trying to polish it as much as possible, but the game is pretty much done. I made Fast for's Got Game HTML5 competition. I was really proud of my game from last year, even though I didn't win anything, so I decided that this might be the occasion to create a new cool game. All you have to do is to drive as long as possible without destroying your car, but I still tried to make it a little bit more than a simple scoring game (though I love these). You can play 4 game modes at the moment: Free: basic endless scoring mode. The only goal is to go as far as possible.Time attack: same thing, but with a two-minute limit.No crash: in this mode, you have to go as far as possible without a single scratch on your car. Hit one single obstacle, and the game is over.Challenge: this mode is a little different. Everytime you play, you are given three challenges. You can only complete these objectives. Once you complete one of them, it is replaced by a new one If you guys have any feedback (good or bad), I'd be happy to read it and try to improve on (even on the graphics). You can play the game at Have fun
  25. I'm not sure if it's exactly Babylon.js question, but here's the situation I can't deal with for a while now... I have a box (player), that has velocity and etc. things, right? While the box doesn't touch (intersects) anything it's — player.velocityY -= worldGravity, when it touches something — player.velocityY = 0 and no worldGravity applies anymore, right? Things work as they should. The problem is that -velocityY is so high that player gets inside of the floor and only then stops. I tried everything I could: intersects for meshes, for bounding boxes, points, even rays infos (distance and etc.); but nothing helps because -velocityY is higher than collision code runs (I'm not sure but that's my only though, since less velocity works just fine). Player's velocity by Y gets between -8 and 0, while gravity is 0.25. Any thoughts? player.y++ while intersects isn't an option, of course.