Search the Community

Showing results for tags 'performance'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

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

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Website URL


Twitter


Skype


Location


Interests

Found 260 results

  1. Hey guys, To boost a performance on mobile devices with Full HD screen resolution I'm doing the following thing: 1. Set canvas size like half of full screen 2. Scale the canvas with CSS As a result, the GPU has to do less work, and the scene runs smoothly. Here is the example css: #canvas { position: absolute; width: 40%; height: 40%; -webkit-transform: scale3d(2.5, 2.5, 1.0); transform: scale3d(2.5, 2.5, 1.0); -webkit-transform-origin: 0 0 0; transform-origin: 0 0 0; top: 0; margin-bottom: 70px; touch-action: none; -ms-touch-action: none; z-index: 0;}Well, this approach worked until I started dealing with picking collisions. The picking mechanism doesn't take in account the scaling. Therefore the pick result is completely wrong. If you run this code without scaling it would work as expected (if you pick sphere, it would write in the console "sphere1"): var createScene = function () { // This creates a basic Babylon Scene object (non-mesh) var scene = new BABYLON.Scene(engine); // Our built-in 'sphere' shape. Params: name, subdivs, size, scene var sphere = BABYLON.Mesh.CreateSphere("sphere1", 16, 3, scene, false); sphere.rotationQuaternion = BABYLON.Quaternion.RotationYawPitchRoll(Math.PI / 2, -Math.PI/2, 0); var camera = new BABYLON.FreeCamera("camera", new BABYLON.Vector3(0, 50, -10), scene); var light = new BABYLON.DirectionalLight("dir1", new BABYLON.Vector3(0, -1, 0), scene); light.position = new BABYLON.Vector3(0, 30, 0); sphere.position = new BABYLON.Vector3(0,1.5,0); camera.target = sphere.position; camera.setTarget(sphere.position); camera.attachControl(canvas, true); scene.onPointerDown = function (evt, pickResult) { console.log("Picked " + pickResult.pickedMesh.name + " in x:" + pickResult.pickedPoint.x + " y:" + pickResult.pickedPoint.y + " z:" + pickResult.pickedPoint.z); } return scene;};But if you run it with the above css, it wouldn't work, i.e. picking sphere would give you a null result. Anyone has any idea how to deal with this?
  2. Hello, Today i was testing my game on different devices, and on normal/low devices I've been aware of a problem with the tweens. I've noticed that the duration of the tweens when the fps drop from 60 to 30 or less is a lot slower, i thought that the time that you put on the tween was real time, now I supose that the time is an internal clock that is related to the fps. In conclusion, when the fps decrease, the tween is slower than expected. How do you think I could fix this? Thanks
  3. I made a little demo called pixi-bouncing-box. You can see the demo here. So initially there are 10 bouncing boxes. When button add 10 boxes is clicked, another 10 boxes are added to stage. The animation run smoothly at 60fps, even after 90 boxes added. But after awhile, the fps gradually decreased from 60 to 50 then down until 20fps with 90 boxes added to stage. I saw the PIXI v3 100k bunnies benchmark and it claimed it got 40fps. Did I make some mistakes? The code I made is available at Github, but I'll also post it here in case you need a quick scan. ;(function ( window, document, undefined ) { 'use strict'; var WIN_WIDTH = window.innerWidth; var WIN_HEIGHT = window.innerHeight; var btnAdd = document.querySelector('#add'); var renderer = new PIXI.CanvasRenderer(WIN_WIDTH, WIN_HEIGHT, { transparent: false, autoResize: true }); renderer.backgroundColor = 0xF5866B; document.body.appendChild( renderer.view ); var stage = new PIXI.Container(); var speed = 10; var box_w = 70; var box_h = 70; var boxes = []; addTenBoxes(); btnAdd.addEventListener('click', addTenBoxes, false); var boxEdgeRight = WIN_WIDTH - box_w; var boxEdgeBottom = WIN_HEIGHT - box_h; requestAnimationFrame(animate); function animate() { for (var i = boxes.length - 1; i >= 0; i--) { var curr = boxes[i]; if ( curr.isGoingRight ) { curr.position.x += speed; } else { curr.position.x -= speed; } if ( curr.isGoingDown ) { curr.position.y += speed; } else { curr.position.y -= speed; } if ( curr.position.y < 0 ) { curr.isGoingDown = true; changeBoxColor( curr ); } if ( curr.position.x < 0 ) { curr.isGoingRight = true; changeBoxColor( curr ); } if ( curr.position.y > boxEdgeBottom ) { curr.isGoingDown = false; changeBoxColor( curr ); } if ( curr.position.x > boxEdgeRight ) { curr.isGoingRight = false; changeBoxColor( curr ); } } renderer.render(stage); requestAnimationFrame(animate); } function addTenBoxes() { for (var i = 10 - 1; i >= 0; i--) { var box = new PIXI.Graphics(); box.beginFill(getRandomColor()); box.drawRect(0,0,box_w,box_h); box.isGoingRight = true; box.isGoingDown = true; box.position.x = getRandomXPos(); box.position.y = getRandomYPos(); box.endFill(); stage.addChild(box); boxes.push(box); } } function changeBoxColor( _box ) { _box.beginFill( randomColor().replace('#', '0x') ); _box.drawRect(0,0,box_w,box_h); _box.endFill(); } function getRandomXPos() { return Math.random() * WIN_WIDTH - box_w; } function getRandomYPos() { return Math.random() * WIN_HEIGHT - box_h; } function getRandomColor() { return randomColor().replace('#', '0x'); }})( window, document );Does this have something to do with CanvasRenderer? Because when I switch to WebGLRenderer, the animation run smoothly at 60fps even after 3-5 minutes. I am aware that WebGLRenderer is faster than CanvasRenderer but not all device support it, that's why I used CanvasRenderer. This demo is tested in the latest Chrome on Yosemite.
  4. I've been working on a simple canvas game and have run into a problem :/ Here it is --- http://users.sussex.ac.uk/~bc216/AXOLOTLBASS/ Here's a link to the code on github https://github.com/BB-000/Axolotl-Bass-in-Space/tree/master/js It uses the metronome example from this Web Audio tutorial http://www.html5rocks.com/en/tutorials/audio/scheduling/ Everything works fine on my macbook pro when run on my local server, however when I uploaded it live to the web it sometimes starts struggling after about 10 minutes of running the audio starts to crackle and eventually stop. I tested it on some slower laptops and it struggled a lot more - took a couple of minutes before the audio crackled / cut out and and started to lag. This makes me pretty sure it's a memory leak causing this. I did some profiling and fixed the way the entity images were handled, used a resource loading class instead of using new Image() each time. This fixed the dom node problem on the timeline : Before After But the problem still occurs, the memory usage still slowly creeps up. The memory snapshots show some image elements in the detached dom tree in red : heap snapshot - Does this mean the entity images are somehow not getting removed properly or are being duplicated still? - Or could the problem be my removal of entities using Array.splice[index] ? I've read this can cause problems but thought my game was too small / simple for this to be the case? Here is the relevant code for dealing with entities (they are spawned by pushing them onto the monsters[] array) // in the monster's update function if (this.isDead === true) { if (barNumber % this.barTiming === 0) if (current16thNote % this.timing === 0) { // Waits until it's queue to disappear and play it's sound score += this.points; this.toRemove = true; // sets to remove to true, read this could solve some problems // playSoundDelay(samplebb[this.sound], this.channel); } } // monster's render function, (thought this could be something to do with it if the image elements are the problem) render: function (ctx) { if (this.isDead === false) { ctx.drawImage(resources.get(this.monsterImage), this.x, this.y, this.sizex, this.sizey); } else if (this.isDead === true) { // if monster is dead, make it translucent ctx.save(); ctx.globalAlpha = 0.4; ctx.drawImage(resources.get(this.monsterImage), this.x, this.y, this.sizex, this.sizey); // resources.js is an asset loading library ctx.restore(); } } // One type of entity var Shark = function (position) { this.x = position.x; this.y = position.y; this.sizex = 64; ..... ..... this.speed = Math.random() * (120 - 50) + 50; this.monsterImage = "images/Shark.png"; // the url to be passed into the resource.get call }; Shark.prototype = Object.create(MonsterMove2.prototype); function updateEntities(dt) { for (var x=0; x < monsters.length; x++) { var monster = monsters[x]; monster.update(); if (typeof monster.move === 'function') { if (!monster.isDead) { // If entity is alive, chase the player monster.move(dt); } } if (monster.toRemove){ monsters.splice(x,1); // Removes the monster from the array } } Thanks in advance if anyone can point me in the right direction!! This has been driving me mad for a while!
  5. I have some images as small as 32x32 and some as large as 512x512. Is there any reason to not put all of my images in the same sprite sheet? I want to take full advantage of sprite batching and my current understanding is that if all textures come from the same sprite sheet there will be huge performance gains? Jordan
  6. Hi! I'm trying to develop my first game with Phaser. First of all - great engine. Really easy to understand and well documented. Game is rather simple (i think). - There are around 50 sprites (loaded in "create" function, 1.6 MB PNGs) falling one by one from above (with tween, tried gravity too but it's overkill for such simple animation?). - There is onInputDown bind and onOutOfBounds one. - There is text layer with score. On my PC (i7, 8GB RAM, decent GPU) there is no problem with perfomance at all. Problem is when I run it via CocoonJS launcher on my Samsung S4 (I've tried with Chrome too, same or even worse results). Performance of game is rather bad. Sprites are not moving smoothly. It is normal or should I look for error on my side?
  7. I've been working on a few projects using Phaser lately and I just came with this strange problem. My game has some very heavy logic and lots of animations so I thought that this was what was slowing it down in Chrome, but I've been running some tests and I came up with some weird problems. I have a blank state where I create 80 sprites at the same time and apply a tween to them (set to yoyo and infinite repeat) and it works just fine. But if I add a background image the game slows down a lot, going from an average of 55fps to 15fps. I also noticed that if I create my sprites from an atlas performance drops a lot too. The background image is a .PNG with 640x960 resolution. The sprites I create are 70x70 and also .PNG Any ideas on what could be happening? any more info I should provide? Thanks in advance for any help I get. edit: I should also add that this works perfectly on Safari, it's just a problem with Chrome and I'm using CANVAS by default instead of WEBGL.
  8. Hello everyone! I am making a game and i have some objects with triangular shape. I use p2js just for collision detection with onBeginContact (everything else is handled manually, like movement etc.). So i am wondering if there is a less expensive way to detect polygon collision. Thanks
  9. Hi everyone! I have in my application a lot of object (around 5 000) moving. I want to leave a trail behind them. I've tried with the particle engine of babylon.js but it was a fail with 5 fps... I wonder how i can make a trail with good performance with Babylon.js. This code is pretty clean but i'm afraid of the performance of this for so many object. How can i do this ? Thank you guy!
  10. Hi guys, do you know what's the best solution for a well performed game with automatically increasing game score and distance like other endless scroller? I've two different ways tested. In reality, the code looks something different. I do not know memorize everything. The important part is the function calling. In update game loop or with different timer parallel... 1. - Update distance every time in game loop (update()). 60 times, every second, the player moves a few px. This is a value between 0.3 and > 2, depending on the game speed. - Update score every time in game loop (update()). 60 times, every second, the score increase. This value starts with 0, depending on distance and a multiplier. 2. - Update distance every time in game loop (update()). 60 times, every second, the player moves a few px. This is a value between 0.3 and > 2, depending on the game speed. - Save all in a distanceTotal variable - Built a interval timer (create()) with 500ms to check score and make data tween (600ms) for a nice counter animation. Update score depends on distanceTotal-oldDistance, to tween the correct new score value. I think number 2 is faster than the other, but i'm not sure. We dont have a score checking and updating 60 times per second. But a second parallel running timer 2 times per second and a tween for the count animation. There could be a problem with the total game score.... i update the score every 500ms, but what when game ends between the interval? In number 1 i dont need a tween, because the update is so fast. Are there better solutions or is this the correct way? I would be very happy for some hints. Regards, Chris
  11. Hi, I'm working with Phaser 2.2.1 In the preloader state I preload 150 mp3 files. Total of 12Mb. It's quite big. game.load.audio("mySound", "mySound.mp3");On IOS8 the page loads all the sounds, but after a quick delay the page breaks and refresh itself. Is there a limitation on IOS8? Maybe a better way should be to lazy load my audio files and then unload them? Is it possible to unload audio file from memory?
  12. Hi, I'm new around here, been using Phaser for some months now and I have to say it's really nice. Been working on a game intended for mobile devices foremost. During development, up until now that is, I've been working against version 2.1.3 and performance has been really good on my phone. A week ago I updated to latest version(2.2.2) and now my performance has now dropped significantly. I've re-traced the drop to version 2.2.0, performance got a lot better when I switched to TweenLite instead of the built in Tweens but it's still not good. Particle systems and Tweens seems to be the biggest problem, when I turn off the particles and switch to TweenLite the game works better. I have maybe about 20 particle systems in the game but they don't run at the same time, and as I said, never any problem with them previously. I've got two versions of the game before and after the switch and on my HTC One-phone the performance drop is really easy to spot (I can't publish any links publicly because of confidentiality, sorry).Spent a lot of time trying to revert different parts of the code but still haven't found any solutions. This might of course be fault on my side, I might have missed some new setting or default parameter (or something else), right now I'm stuck and need some help. If I can clarify anything, just tell me. Thank you guys for any help.
  13. I'm porting a Flash/AIR project to Phaser, and everything is going pretty smoothly so far, but I hit a really odd performance issue which I'm hoping someone can explain to me. When using a forEach loop on a phaser Group (called desksGroup) which only has 9 items in it, I get ~40fps on mobile. But if I get rid of that forEach loop, and instead put the code into the built-in update() function of each of the 9 sprites within the group, FPS drops to ~4. Here is the game loop with a forEach going through a group of sprites (desksGroup): GameState.prototype.update = function() { // kill any pencils that hit a wall game.physics.arcade.overlap(layerMap, pencilsGroup, pencilHitWall); // TODO: subclass "Sprite" so that these update functions call themselves desksGroup.forEach(function(desk) { clientsGroup.forEach(function(theClient) { // get closest client if (!desk.currentTarget || desk.currentTarget && game.physics.arcade.distanceBetween(desk, theClient) < game.physics.arcade.distanceBetween(desk, desk.currentTarget)) desk.currentTarget = theClient; // other ideas for targeting: least health, most health, slowest, fastest }); if (desk.currentTarget && desk.currentTarget.health > 0 && game.physics.arcade.distanceBetween(desk, desk.currentTarget) < desk.range) { if (game.time.now > desk.nextFire) { desk.nextFire = game.time.now + desk.fireRate; var pencil = pencilsGroup.getFirstExists(false); pencil.reset(desk.x, desk.y); pencil.lifespan = desk.fireLife; pencil.rotation = game.physics.arcade.moveToObject(pencil, desk.currentTarget, desk.fireSpeed); } } }); game.physics.arcade.overlap(clientsGroup, pencilsGroup, pencilHitClient); if(defaults.showHealth) { clientsGroup.forEach(function(client) { game.debug.geom(new Phaser.Rectangle(client.x, client.y - 16, Math.max(0, tilemap.tileWidth * (client.health / defaults.health)), 7), '#00ff00', true); }); }}And here is a slightly modified version, with that forEach removed: GameState.prototype.update = function() { // kill any pencils that hit a wall game.physics.arcade.overlap(layerMap, pencilsGroup, pencilHitWall); game.physics.arcade.overlap(clientsGroup, pencilsGroup, pencilHitClient); if(defaults.showHealth) { clientsGroup.forEach(function(client) { game.debug.geom(new Phaser.Rectangle(client.x, client.y - 16, Math.max(0, tilemap.tileWidth * (client.health / defaults.health)), 7), '#00ff00', true); }); }}With the desk update functions moved to this: var deskUpdate = function() { var desk = this; clientsGroup.forEachAlive(function(theClient) { // get closest client if (!desk.currentTarget || desk.currentTarget && game.physics.arcade.distanceBetween(desk, theClient) < game.physics.arcade.distanceBetween(desk, desk.currentTarget)) desk.currentTarget = theClient; // other ideas for targeting: least health, most health, slowest, fastest }); if (desk.currentTarget && desk.currentTarget.health > 0 && game.physics.arcade.distanceBetween(desk, desk.currentTarget) < desk.range) { if (game.time.now > desk.nextFire) { desk.nextFire = game.time.now + desk.fireRate; var pencil = pencilsGroup.getFirstExists(false); pencil.reset(desk.x, desk.y); pencil.lifespan = desk.fireLife; pencil.rotation = game.physics.arcade.moveToObject(pencil, desk.currentTarget, desk.fireSpeed); } }}As you can see, the only difference is that I've removed the desksGroup.forEach() code block, and created an updateDesk function. Elsewhere in the code, where I instantiate the "desk" Sprites, I have the following line: desk.update = deskUpdate;I was thinking that by adding the deskUpdate function to each desk Sprite, it would save some overhead (since the .update() gets called automatically, instead of my explicitly looping through the group via forEach). However, when I use this deskUpdate function, my FPS on mobile drops from ~40fps to ~4fps. I also tried using an regular function declaration (function deskUpdate() {...}), and had the same performance loss.
  14. Actually I am working at a 3d gesture flick shoot like game, done completely in javascript. It includes 3D camera movements too. Actually it runs at 60FPS at a S3 (Chrome) and about 50FPS on Android stockbrowser. Still lot of finetuning to do...
  15. I've just been making it up as I go with pixi, and I wanted a sanity check for my approach to entities. My entities have a lot of functionality and effects, but cause FPS drops when about 100 are on screen. Is that appropriate given how complex they are? Is it most likely caused by one specific thing? Is any of this approach decent? As a basic overview, here's how my Pirate class goes: create a class called Pirate, inherits from DisplayObjectContainer add a main ship sprite, alpha set to 1 add an explosion effect (itself a complicated entity), disabled initially and alpha set to 0 add debris sprites that break apart when the ship is destroyed, alpha set to 0 add a hitpoint bar add matrix+filters for a mouse over effect when player targets the pirate check a 'state' variable once per frame, to see when pirate has died once per frame, run the appropriate logic for the state the pirate is in (alive: do nothing, dead: play explosion effect, etc) So to summarize, entities are DisplayObjectContainers containing a bunch of art assets, most of which are invisible at any given point in time. A state variable is monitored by the client, and used to decided which art, effects, etc. to show at any given time. The design has been moving more and more to a component-based pattern, as shown here it is still just a hybrid. Oh, and before I forget, the entities in the game are only clientside graphics! All actual logic relating to the ai/movement/etc occurs on the server at 20 fps. The client interpolates all entities at 60 fps for nice smooth movement. I don't think this causes the main performance issue. When profiled, 18% of the total time is spent in WebGLRenderer.render, and 1.5% in the interpolation. Here's an example of how I create my jellyfish pirate ship. No need to read the code too thoroughly, it's all just a rough outline. There are sounds (howler.js) and object pooling, but I've cut most of that stuff out for now. Here's a very short video of what it looks like: https://www.youtube.com/watch?v=t3udYwZOO50 function Pirate() { PIXI.DisplayObjectContainer.call(this) // for clientside prediction of collisions this.collider = new CircleCollider(this.x, this.y, 15) // shows a medium explosion when destroyed this.explosionEffect = new ExplosionEffect(2) this.addChild(this.explosionEffect) // anything that moves/rotates with the ship goes in shipContainer this.shipContainer = new PIXI.DisplayObjectContainer() // the art for the ship when alive and pristine this.ship = new PIXI.Sprite(PIXI.Texture.fromFrame('jellyfish-spaceship.png')) //this.ship.tint = 0x8888ff this.ship.anchor.x = this.ship.anchor.y = 0.5 // broken up pieces of the ship // these sprites all carefully line up to create a whole ship this.debris = [] this.debris.push( new PIXI.Sprite(PIXI.Texture.fromFrame('jellyfish-debris0.png'))) this.debris.push( new PIXI.Sprite(PIXI.Texture.fromFrame('jellyfish-debris1.png'))) this.debris.push( new PIXI.Sprite(PIXI.Texture.fromFrame('jellyfish-debris2.png'))) this.debris.push( new PIXI.Sprite(PIXI.Texture.fromFrame('jellyfish-debris3.png'))) // initialize the debris with an alpha of 0 for (var i = 0; i < this.debris.length; i++) { var debris = this.debris[i] this.shipContainer.addChild(debris) debris.alpha = 0 debris.anchor.x = debris.anchor.y = 0.5 } this.hpBar = new HitpointBar() /* // debug, most recent server position w/o entity interp this.serverPosition = new PIXI.Graphics() this.serverPosition.lineStyle(2, 0xff0000, 1) this.serverPosition.drawCircle(0, 0, 15) */ this.shipContainer.addChild(this.ship) this.addChild(this.shipContainer) // the hp bar goes outside of shipContainer, so that it does not rotate this.addChild(this.hpBar) //this.addChild(this.serverPosition) this._shipRot = null this.interactive = true // used for mouse over highlight effects var colorMatrix = [ 1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1 ]; var filter = new PIXI.ColorMatrixFilter(); filter.matrix = colorMatrix; // skipped code: mouse over effects that create a highlight via color matrix // skipped code: events fired that cause gui to change cursor}Pirate.prototype = Object.create(PIXI.DisplayObjectContainer.prototype)Pirate.protoype.constructor = PirateHere's where I hackishly check for a state change, and begin the death animation effects: Object.defineProperty(Pirate.prototype, 'state', { get: function() { return this._state }, set: function(value) { // Spawn to Alive if (this._state === EntityState.Spawn && value === EntityState.Alive) { // no spawn effect for this entity } // Alive to Dead if (this._state === EntityState.Alive && value === EntityState.Dead) { // hide the pristine ship, show explosion this.ship.alpha = 0 this.explosionEffect.alpha = 1 this.explosionEffect.begin() // show the debris and break the ship apart for (var i = 0; i < this.debris.length; i++) { var debris = this.debris[i] debris.alpha = 1.0 // vx, vy represent velocity debris.vx = MathEx.random(-15, 15) debris.vy = MathEx.random(-15, 15) debris.rotVelocity = MathEx.random(-5, 5) } } this._state = value }})I'll note that the above code is a getter/setter with side effects, which I've been told is bad form. I intend to move an identical check into update() and then abstract it away into a base entity class. Then when I do make a concrete class, it might have the same logic in sections like onSpawn, onDeath, etc. And then here is the somewhat messy update() function that runs once per frame: Pirate.prototype.update = function(delta) { // update HP bar //TODO: encapsulate the hp bar so we can call hpBar.update(delta) and be done // the hp bar effect is created by growing the empty part this.hpBar.empty.scale.x = -(this.maxHullHp - this.hullHp) / this.maxHullHp // logic if dying if (this.state === EntityState.Dead) { this.explosionEffect.update(delta) // debris moves slowly apart and spins, fades to nothing slowly for (var i = 0; i < this.debris.length; i++) { var debris = this.debris[i] debris.x += debris.vx * delta * 0.1 debris.y += debris.vy * delta * 0.1 debris.rotation += debris.rotVelocity * delta * 0.1 debris.alpha -= 0.35 * delta } // fade out the hp bar this.hpBar.alpha -= 0.35 * delta } // this ship doesn't have a particular animation that goes with it, but // here is approximately how the animation code would go if it did /* if (Date.now() - this.lastFrameTimestamp > this.animationFrameDelay) { this.frameIndex++ this.ship.gotoAndStop(this.frameIndex) this.lastFrameTimestamp = Date.now() if (this.frameIndex > this.totalFrameCount) { this.frameIndex = 0 } } */ // skipped: call to this.finalize() which marks this entity for return to // the object pool}So basically if the entityState is dead, the explosion and debris spreading apart gets to play. Other entities in my game have more significant logic for other states such as spawning effects or animations while alive. Thoughts?? Suggestions? Thanks for reading
  16. Hi! One and quick question... Using groups, is there any diference (in terms of performance) between phaserGroup.alpha = 0;and phaserGroup.visible = 0;? This question is also extensible to sprites... Thanks
  17. Hello, The weirdest bug/issue just came up, I had a very light game (in terms of updates/actions, etc) and I was getting no more than 25 FPS on mobile devices (quad core tablet, dual core mobile phone android) When I was trying to figure out what was wrong I deleted one line from my .css file and suddenly the game runs with 55-60 FPS as intended. I reversed the changed line and again fps dropped to 25-27. I simply had canvas { border: 5px solid white;}Does anyone know why this happens? And moreover if any more css properties affect game performance. Thanks guys, I hope we can clarify and find the reason behind this.
  18. Hi All, I have a game that's very similar to flappy bird. You tap to make the player go up and you release to go down. To make it visually appealing, I have 2 different types of background, a forest and a cave. In total it's about 3 images of cave and 3 images of forest. I set it so that the background moves from right to left, while the player only moves up and down when you tap. Visually this looks like you're flying through the forest, then the cave, then the forest, etc. Obstacles also come from right to left and fly at you. That in a nutshell is my entire game and it works fine on desktop. On mobile however, it stutters and feels slow. Collisions also sometimes lag the game a bit. If I remove the backgrounds, the game feels normal on mobile. So I think the major problem is that I have an entire background image moving from right to left at all times. I read somewhere that I could use 2 canvases, overlayed on top of each other. A foreground canvas which is mostly transparent except for the objects, and another canvas which is just the background. I feel like 2 canvases of Phaser games would be less performant, but I'm not sure. What I read said it would perform better, but that was based on a background that didn't move like my game does. I don't want to implement it if I find the performance gets worse or the performance gain is negligible. I don't have text rendering. Everything is images. I load sprites offscreen. What can I do to improve performance based on the information I've provided? Should I try the 2 canvases approach? What are some things I can try to significantly boost my performance? I'm willing to try anything at this point...
  19. Hello guys, I'm making my first game using Phaser, but i have a problem. The idea is: the player guide a yellow monster to eat the food taht falls from the screen. When the player eat, should immediately drop a new food. The problem is that sometimes the food takes to fall. I changed several things in the code, but got no result. Thank you for your attention Play de game: http://tiagosilvapereira.esy.es/Scroller/ window.onload = function(){ var width = navigator.isCocoonJS ? window.innerWidth : 640, height = navigator.isCocoonJS ? window.innerHeight : 960; game = new Phaser.Game(width, height, Phaser.AUTO, '', { preload: loadAssets, create: createScenario, update: updateGame });}var score = 0;var life = 100;var life_dec = 5;var food_velocity = 400;var food_position_x = 0;var food_value = 5;var left=false;var right=false;function loadAssets(){ game.time.advancedTiming = true; game.load.image('background', 'assets/background.png'); game.load.image('player', 'assets/player.png'); game.load.image('food', 'assets/food.png'); game.load.spritesheet('btn_left', 'assets/btn_left.png', 64, 64); game.load.spritesheet('btn_right', 'assets/btn_right.png', 64, 64);}function createScenario(){ //if (!game.device.desktop){ game.input.onDown.add(gofull, this); } //game.device.cocoonJS = true; //game.device.android = true; game.input.maxPointer = 1; //Desabilita o multitoque game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; game.scale.pageAlignHorizontally = true; game.scale.pageAlignVertically = true; game.scale.setScreenSize(true); game.physics.startSystem(Phaser.Physics.ARCADE); cursors = game.input.keyboard.createCursorKeys(); buttonleft = game.add.button(0, 900, 'btn_left', null, this, 0, 1, 0, 1); buttonleft.fixedToCamera = true; buttonleft.events.onInputOver.add(function(){left=true; right = false;}); buttonleft.events.onInputOut.add(function(){left=false;}); buttonleft.events.onInputDown.add(function(){left=true; right = false;}); buttonleft.events.onInputUp.add(function(){left=false;}); buttonright = game.add.button(576, 900, 'btn_right', null, this, 0, 1, 0, 1); buttonright.fixedToCamera = true; buttonright.events.onInputOver.add(function(){right=true; left = false;}); buttonright.events.onInputOut.add(function(){right=false;}); buttonright.events.onInputDown.add(function(){right=true; left = false;}); buttonright.events.onInputUp.add(function(){right=false;}); createBackground(); food = game.add.group(); food.enableBody = true; createPlayer(); createFood(); scoreText = game.add.text(10, 10, 'Score: 0', {font: "20px Arial", fill: "#ffffff", align: "left"}); lifeText = game.add.text(10, 50, 'Life: 100', {font: "20px Arial", fill: "#ff7700", align: "left"}); game.time.events.loop(2000, decLife, this);}// Atualiza o jogo - 60fpsfunction updateGame(){ lifeText.text = 'Life: ' + life; if(life <= 0){ var text = game.add.text(game.camera.width / 2 - 100, game.camera.height / 2, "GAME OVER", { font: "30px Arial", fill: "#ff0044", align: "center" }); } player.body.velocity.x = 0; moveFood(food_velocity); game.physics.arcade.overlap(player, food, overlapFood); if (cursors.left.isDown || left == true){ player.body.velocity.x = -1500; }else if (cursors.right.isDown || right == true){ player.body.velocity.x = 1500; } game.debug.text(game.time.fps || '--', 600, 14, "#00ff00");}function createBackground(){ game.add.sprite(0, 0, 'background');}function createPlayer(){ player = game.add.sprite(game.world.centerX - 16, game.world.height - 200, 'player'); game.physics.arcade.enable(player); player.body.collideWorldBounds = true;}function overlapFood(){ food01.body.position.y = 0; randomFoodPos(); food01.body.position.x = food_position_x; if(food_velocity < 2500){ food_velocity += 10; } if(life < 100){ life += food_value; }else{ life = 100; } score++; scoreText.text = 'Score: ' + score;}// Cria as plataformasfunction createFood(){ randomFoodPos(); food01 = food.create(food_position_x, 0, 'food');}function moveFood(speed){ food01.body.velocity.y = speed; if(food01.body.position.y >= 960){ food01.body.position.y = 0; randomFoodPos(); food01.body.position.x = food_position_x; }}function randomFoodPos(){ food_position_x = game.rnd.integerInRange(32, game.world.width - 32);}function decLife(){ // Decrementa a vida do player if(life > 0){ life -= life_dec; }else life = 0;}
  20. In the game creation it is possible, by the 7th parameter, to choose to use antialiasing or not, but is there a way to control the level of it? In my game, disabling it ensures 60fps at all times, but having it on puts me down to about 40fps. It definitely looks a lot nicer, but it also seem to be very expensive, on my system at least. Considering the major difference from on/off I suspect antialiasing is at more than 2x, but I am unable to confirm this. What I am looking for is somewhere in between, where it still looks alright and the performance difference is not as major as now. Where do I control this stuff? Also, questions that has to do with rendering stuff, should I rather ask them in the PIXI forum from now on? That is good to know.
  21. I just grabbed Pixi 1.5 and straight-away I went to test SpriteBatch with my tilemap scroller torture test. the results were not what I expected - I get about half the frame-rate that I get using DispayObjectContainer... so... my question is: are there particular "gotchas" or things I need to watch out for when using SpriteBatch? (all I did was change the DisplayObjectContainer that was I was using to a SpriteBatch. perhaps that isn't such a great idea and there are other factors I need to be aware of?) cheers!
  22. Hi friends, I have this game http://rocketcarrot.brace.io, it runs at 60 FPS even in my old Dell PC from 2009, the problem is noticed when run in mobile, I have a Nexus 4 and the FPS is between 20-25 (Chrome Browser) and as low as 10 FPS on Firefox. I've also noticed the sound is very laggy especially on Firefox. I tried to change to CANVAS mode, but it look worse! Thank you so much!
  23. Hello , Actually, I'm trying to develop a parallel coordinates graphe using a WebGL rendering. Like http://bl.ocks.org/syntagmatic/raw/5023284/ but with Pixi.js, since webgl-2D is not maintened anymore. Except I don't have the same amount of data. I have more, a hell more, 100 000 lines minimum . I already read some topics here and on Github, where recommandations are to use Sprite instead of Graphics. But the performance are worse . Switching to canvas ? The render is as smooth as a baby butt. The WebGL rendering of 100 000 lines uses 1,50Go of GPU RAM, which seems to be a lil' too much. Here some code and explanations: var rtContainer = new PIXI.DisplayObjectContainer();var stageFG = new PIXI.Stage(null, true);var renderFG = new PIXI.autoDetectRenderer(foreground.width, foreground.height, { view:foreground, transparent:true, antialias:true, clearBeforeRender:false, preserveDrawingBuffer:true });stageFG.addChild(rtContainer);draw();Here my context. foreground is just a <canvas> element and rtContainer will only contains new graphics to display in the stage. The function draw() will begin to render the stage when data are received. var render_loop = 0;function draw() { var requestAnimationId = requestAnimationFrame(draw); renderFG.render(stageFG); render_loop += rtContainer.children.length; rtContainer.removeChildren(); if (render_loop == data_length) { cancelAnimationFrame(requestAnimationId); }}; Function draw(), rendering the stage and deleting the graphics which have just been drawed. data_length is the number of data I will receive, which means I draw(), not until I received everything, but only when I rendered everything. var update_loop = 0;this.update = function(new_data) { path(new_data, rtContainer, color(new_data.classification)); ++update_loop;};I receive data asynchronously, with server-side events, triggering the update function. The new_data is a dictionary. I use the key classification for ordering. The function path() create the line under a graphic object: function path(d, ctx, color, lineWidth) { var graphics = new PIXI.Graphics(); var lineWidth = lineWidth || 1; graphics.lineStyle(lineWidth, color.replace('#', '0x'), opacity); var x = xscale(dimensions[0]) - 15, y = yscale[dimensions[0]](d[dimensions[0]]); // left edge graphics.moveTo(x, y); dimensions.map(function(p) { x = xscale(p), y = yscale[p](d[p]); graphics.lineTo(x, y); }); graphics.lineTo(x + 15, y); // right edge ctx.addChild(graphics); delete graphics;};Pretty much the same function of the example. d is the data, ctx the rtContainer. My graphics is a line, with multiple points, and different colors. So each lines are differents. And voila. Little benchmark : Canvas rendering 120 000 lines : ~20sec, very smooth. Memory is happy. WebGL rendering 120 000 lines : ~20sec, not so smooth, depends a lot of the number of lines. Huge amount of memory used. I tried to use generateTexture() in the path() and use a SpriteBatch, but my comp crashed around 1000 lines... Not a good idea obviously. My questions are : - Do I use Pixi.js correctly ? - Is there a way to improve performance of WebGL ? Any idea ? - Is it normal to use this quantity of memory when using WebGL ? If you need more code or more explanations, I can provide it (although, I'm not english, I apologise for any tears, vomiting, eye-gouging caused by my prose)
  24. First of all I'd like to thank the pixi.js team for doing such a great job to the renderer in the past few months. I'm getting close to releasing my app but while testing it on an Iphone 4 I noticed that it ran horribly on ~5 fps. I was using an old, january version of pixi.js so I thought I'd give it a shot and download the latest one and the game instantly jumped to ~26 fps! Now that's an incredible amount of jump and getting the canvas to render 5 times faster is awesome, but the game is still a bit slow to me! The game has been dumbed down a few times graphically and it's pretty well optimized so I don't see any other way of improving it unless there's some trick with the TilingSprite-s. The reason I'm suspecting that the TilingSprite-s are behind this problem will be explained by these screenshots below that I made on an Iphone 4 using CocoonJs launcher: (Please note that these images are a level of intellectual property.) The 1st image is the actual game running using all the layers/TilingSprite-s/graphics. ~26 fps The 2nd image has 2 TilingSprite layers - forest (1024x256) and hills (512x128) - removed. ~43 fps (+17) The 3rd image has (all) 3 TilingSprite layers - forest, hills and grass (64x16) - removed. ~61 fps (+18) Removing two, huge layers yielded basically the same result in improvement as removing the last, tiny horizontal TilingSprite layer, the grass. So the game runs absolutely smooth when there are no TilingSprite-s present at all, but even when a single, small one is introduced, the fps will drop considerably. Is there a way to optimize these TilingSprite-s or any alternatives to them? I'm definitely not aiming to get 60 fps on such an old device as an Iphone 4, but I'd be content getting 40 using all the assets. Thanks in advance!
  25. I am trying to recreate this effect in a way that performs better. http://labs.nimblelight.com/CanvasTests/pixelRedraws/ I created the above in canvas 2d with javascript. I am no javascript master, but I do know that for the performance I want I'll probably need WebGL, and a fast framework to go with it. That led me to pixi.js. I have come across the SpriteBatch class but I don't know if that matches my needs? Perhaps I'm thinking of the term sprite too traditionally. Any insight into the best way to go about this with pixi? Much appreciated, Ryan