Search the Community

Showing results for tags 'performance'.

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 189 results

  1. Hey guys.. I have a quick question. So I'm preloading a background texture right, roughly 960 x 540, so not huge in the grand scheme of things. The preloader has finished loading it, and it definitely exists in the cache, however when ever I do this... let bg = new PIXI.Sprite(PIXI.Texture.fromImage('myBG.png')); stage.addChild(bg); It takes a fair while to actually add it to the stage. I've watched the network to see if it IS making another xhr request to get the same image, and it's not Are there any suggestions if I'm doing something wrong? Should I make a custom cache and create all the textures first so I don't have to wait for PIXI.Texture.fromImage to hunt through the texture cache and make it? Cheers!
  2. Hi, I am making my first mobile HTML5 game using Phaser. Its a very simple tap game where you have to keep your character balanced. I have noticed something that is kind of strange to me. I have tested the game on: -iphone 5c, IOS 10.2.1, safari browser. -iphone 5s, IOS 10.2.1, safari browser. -Samsung Galaxy S4, android 4.4.2. I have tested the game using CANVAS mode and WEBGL mode for comparison. I observed the following: CANVAS mode: Iphone 5c < Iphone5s ---> 30fps vs 60fps avg. -----> expected this.... S4: 60fps. WEBGL mode: Iphone 5c > Iphone5s ---> 60fps vs 30fps avg. -----> did not expect this.... S4: 60fps (same). My expectation was that the 5s would play at 60fps in WEBGL mode, but it is the opposite case. On the samsung s4 it performs the same for both. In CANVAS mode, I have 15-17 draw calls . In WEBGL mode this reduces to 9 draw calls (Most of my objects are on a single atlas). I still have to add audio to the game. I can imagine that it is hard to tell what might be going on, but I can't really find a reasonable explanation for this result and its kind of dissapointing. It seems to me that I can't get a reliable result using WEBGL.... I'm thinking of sticking to CANVAS mode and optimize as much as I can. Would this be the right way to proceed?
  3. So I've been looking into the new updates to Phaser CE (2.7.0+) and what has caught my eye the most is the updates to the way Phaser handles textures. It now seems to have the ability to handle texture compression formats for WebGL which is exciting! Previous to this, all the games I had worked in were just loading PNG RGBA data into the graphics card and having come from other engines that support texture compression for GPU RAM optimizations, it was definitely a feature I missed. I've branched on an old project I had in order to test this new compression system but I'm not sure how it would work with atlases. I was already using Texture Packer before to generate Texture Atlases for the game but they were just PNG atlases. I came across this Advanced Rendering Tutorial where it explains how to set up your Texture Packer project. I've gone ahead and done that but the examples only show the ability to load an image with those compression settings. Here is a doc reference to the load image function. Currently, I am using'key', 'texturePNGURL', 'jsonURL'); It seems the new update only supports the following two calls'factory', { etc1: 'assets/factory_etc1.pkm', s3tc: 'assets/factory_dxt1.pvr', pvrtc: 'assets/factory_pvrtc.pvr', truecolor: 'assets/factory.png' });'factory', { etc1: 'assets/factory_etc1.pkm', s3tc: 'assets/factory_dxt1.pvr', pvrtc: 'assets/factory_pvrtc.pvr', truecolor: 'assets/factory.png' }); How would I go about loading my atlases with the accompanying JSON information using the new compression system?
  4. Hi, I have a very simple playform game Mario style with arcade physics and two small sprites (platform terrein and player, no background). When I set the game to be 100% width and 100% height (my monitor res is 1920x1080) the framerate is 30 in Firefox and 15/20 in Chrome. I use the following code: new Phaser.Game('100%', '100%', Phaser.AUTO); Does anybody know why would it go so slow if it is only using two sprites? I am big fan of fullscreen games as they are more immersive. The reason I am asking is because I was having a look at Construct2 demos and they are very smooth on fullscreen, see this example: Is Construct using something like Emscripten?
  5. Hey everyone, I have a very simple 2D "minigame" that looks like this (please don't mind the uglyness) : So very simple, only one sprite and a couple of shapes. But my computer (macbook pro) often starts heating up while running the task. So I ran a memory audit (around 700ko increase per minute, that are due to me storing a lot of stuff) and also ran a CPU profile with devtools. Here are the results of the CPU profile: I was wondering if those results seemed ok to you ? @Nockawa Or do you think I might be doing something wrong in the code? (too large to share) When I look at the engine.fps I am at around 60fps, so perfect on that side. The game will be used by around 300 people all over the US with all sort of computers, mine is a high end macbook pro of last year (with of course a shity gpu but still pretty common for macs): 2.2Ghz i7 - 16Gb ddr3 - Intel iris pro 1536 mb - Mac/OS sierra using Chrome Canari Thanks !
  6. Hello all! I'm currently working on a website that has a Babylon.js scene as it's background, and also includes a game created with Babylon.js. I'm trying to keep the scene as simple as possible - I'm only using planes and their clones - and I'm testing on a 2013 ASUS laptop where I'm getting constant 60FPS. But of course, there are users out there with lower graphics performance, and I'm trying to find a way to test and handle that. In my current setup, I monitor the FPS in the first ten seconds, and if it averages under 45FPS, I call scene.dispose(); and set a cookie so the scene won't be loaded next time. Is there a better way to do this? Thanks in advance! BTW, here a video of the submarine-themed game in progress :
  7. Hey guys, just a really quick question on containers. I see that you can use a PIXI.particles.ParticleContainer. In the documentation is says that it doesn't support features such as tinting, alpha, masking etc.. However, as this class is extending from the normal Container, I am curious as to what is different, and how it achieves this. Thanks, Nick
  8. Hi! I am working on my first Phaser-game. I have a performance issue with my collision rendering. I am using tilemaps and an extra layer for my collision. You can see my example on (without rendering collision) and here is the example with rendering collision: Everything is fine on Desktop. Loading time is about 6 seconds. But on mobile devices it takes about 1minute to load. I am using "map.setCollisionByExclusion([], true, this.collisionLayer);" for my collisions. Already tried toreduce the number of layers to a minimum - about 2 layers - does not help. Tried using map.setCollision([8,9..]) - did not render any collision for me. Any suggestions? Thanks for your replies.
  9. So, recently I created my own tweening functionality to overcome some issues I was having with Phaser's ones and make it fit my needs a little better. While doing so I realized Phaser, and apparently many other engines out there, precalculate the tweened values and store them into an array that's later used to update the object's values instead of calculating the value update on every frame. The way I see it, if calculating all the values for a tween that will be played for one second takes, let's say, 1 ms, I would prefer to have those calculations done in 1/60 ms during the whole second, as the impact on performance sounds lower this way than having a CPU intensive frame while the rest are all lower. Is there any good reason to do this that I'm missing? PS: Also, what I was considering is building some sort of tween cache, where I do actually store tween progressions (0-1) for a certain type of tween and time so I can reuse them multiple times, even with different object or values, would be happy to hear if anyone ever used this or if has some interesting thoughts on it.
  10. Hi All, TLDR: i really just want a javascript sprite rendering engine, is Phaser right for me and/or with 3.0 will i be able to just use that part of the engine? I am about half way through my first phaser game and am loving it. Because of the nature of the game, i am using very little of the engine. All I am currently using the engine for is input buttons and sprite rendering. No physics, movement, world updates etc... I am using all my own code for doing movement, collision, updates, etc.. In the current phaser version, i am starting to see some slowdown on mobile browsers. I still have some obvious optimization to do which will help but i am at a point now where i could move things around easily since basically everything is just pure javascript. The hooks are not deep into Phaser at all. I read with 3.0 we would be able to add and remove things from phaser to match what we need, is this still the plan? Would i be able to just use the Sprite Render and Button/Input parts? Is there another engine that might be better (maybe just straight PIXI). Or should i just use Canvas and make my own simple sprite management? Any advice from you guys with experience would be much appreciated.
  11. I know this will pretty vague but "What the Deal With Mobile And BabylonJS". 1... Is mobile in web browser 'performant' enough now to get good play fps 2... Has anyone use the newer IOS WKWebView to package a BJS game and get good fps When i first started playing with BabylonJS a few months ago, using just raw javascript (before i made the toolkit)... I put a few basic boxes and cube and simple rotation with some 1 or two lights... I was getting horrible frame rate (15-18 fps) with just a few static items when i ran on I'm old iPad 2 Air. I searched around the internet and found things like CocoonJS that was supposed to provide and IOS/Android 'native' WebGL emulation layer (or something like that). There file thing was that the state of webgl on IOS and Android devices very poor and required some kinda of native port. So i just forgot about mobile platform and concentrated on the toolkit. But today after talking to @MrVR who is making mobile type VR projects (and gets fair frame rate some of his scenes ... around 30+ fps I think) i decided to re-visit that how mobile thing and just for shits and giggles pointed my IPAD 2 AIR and iPhone 7 at: Test Shooter Scene just to see what frame rate i would get on my test space shooter scene... Keep in mind i am doing all kind of COMPLEX model prefab instantiation for the waves of asteroids... got particles system, physics collisions and movement, detail meshes, collision meshes, tracking dynamic mesh intersections, playing background audio, shot audio, explosion audio in particle system explosion controller start function... All kinda stuff... PLEASE CHECK OUT on your mobile device and tell me what kind of frame rate you get (I having a problem with hand.js on that version so you can't move the ship... but just let it sit there and see the ship and its particle system before it get hit... then just let the waves of asteroids come down the screen and monitor frame rate). Because i am getting a VERY GOOD fps in just the mobile browser (have not checked out in WKWebView yet)... I mean like 56-60 fps (once initial FOS drown when starting scene...down to about 45ps at FIRST FRAME scene show) with all that stuff mentioned above going... How can that be... A few months ago i could get a simple static game to yield good FPS... But now with my toolkit produced game (which ALOT more stuff and apis packed in there) is getting so good fps... or am i tripping Has there been some kind of update (either with IOS WEBGL support or the new BabylonJS 2.6 updates like webgl 2.0 and vertex array object) that explains this... or is my one scene just a fluke and every body get much lower fps... PLEASE... Help a brotha out yo and check out the link on your mobile
  12. Hi Guys, I have multiple game states and one of them is kind of slow on mobile, while it works just fine on desktop. I ran a js profile to find out what could be the potential cause of this and attached it as a reference here. I know this image does probably not give away enough in order to make any clear predictions on what the issue for my fps drop is, but maybe the pattern of the times spent for the functions to execute yields something I could make use of. I commented out most of my update functions of that state to see whether the issue is hiding in there, but no success. The imagery and text I am rendering is also smaller and less than on my working states. I also tried to destroy and null all objects of the previous state. There might be still a couple I haven't captured. This is what I null: = null; this.add = null; this.make = null; this.input = null; this.state = null; this.stage = null; this.time = null; = null; Any suggestion what could go wrong?
  13. Hello, I've recently encountered a very strange behavior on a specific PC. I've been testing about 10 Phaser puzzle games, which use various tweens for visualization. I've played the games on quite a few desktop PCs, including a Mac, and more than 10 different mobile devices, Android and iOS. On only 1 of the PCs all games exhibit an aberrant behavior where tweens seem to be running slower than their duration states. I couldn't find anything in the Internet about what could cause this issue. Even a simple alpha tween with a certain duration, no delay and autostart is acting weird. Phaser 2.4.6 is used. The issue is experienced in Chrome, currently the latest version, but I've noticed this behavior in earlier versions in the past months. On Edge everything runs as intended. If anyone has any idea or solution, please share.
  14. Hy guys, i used instances for my mesh, but it's really laggy Here's the code: var house; BABYLON.SceneLoader.ImportMesh("Cottage_House", "cottage/", "cottage.babylon", scene, function (newMeshes, particleSystems, skeletons) { house = newMeshes[0]; house.scaling = new BABYLON.Vector3(0.09, 0.09, 0.09); house.position = new BABYLON.Vector3(-6, 0, 0); house.checkCollisions = true; var instances = new Array(); for (var i = 0; i < 10; i++) { instances = house.clone('Instance' + i); instances.position.z = 4; instances.position.x = 3; } var houses = BABYLON.Mesh.MergeMeshes(instances);
  15. When profiling my game in chrome, 8-20% of the time is spent in processInteractive(), but to my knowledge I haven't enabled interactions. Is there a way to turn them off? Is there a way to turn them on *accidentally* ? Perhaps by adding a function to a pixi object like sprite.onmousemove = fn; or something like that? The game is live (works best in Chrome, not sure about the others) . If you play it and run the profiler you can see what I mean. I've also attached a screen shot of the profile. The source code is which I've searched for the strings 'interactive', 'interaction', 'interact' which do not appear as far as I can tell. Thank you!
  16. Hi guys, since webgl will cause some problems for some low performance phones(screen blinking or couldn't show at all), sometimes we are forced to use canvas instead, but the number of sprites showed in the game really influence the performance a lot for canvas, we use cacheAsBitmap to resolve it, but seems like cacheAsBitmap is very memory consuming, it will cause the game crashed for some low performance device(perhaps memory not enough) maybe I didn’t use it correctly, could anyone answer my following question so I can use it more properly? if there is a sprite and it doesn’t move or change at all, will it be kept redrawing by renderer? if so, does it mean that a moving sprite consume the same performance as it to a static sprite? should I use cacheAsBitmap to a single sprite(as I tested the performance improved), or I should only use it to a group which contains numbers of sprites? I have a group contains 40 sprites, those sprites only change their visibility(i.e. sometimes show only 20 of them), I set the group’s cacheAsBitmap to true after i set the visibility to it’s children, and I will set it to false when I need to change the visibility of those sprites again, is it proper to use cacheAsBitmap this way? when I set cacheAsBitmap to false, would it release the memory? any other suggestion will be appreciated:)
  17. There are a lot of things you can do to help get your questions answered faster. This announcement will provide some tips to get you unstuck as soon as possible. The first, and most important thing to do is ALWAYS develop your game with the most recent non-minified melonJS build. Switch to the minified build for your final release; never before that point. Follow the tips in the other announcement:!topic/melonjs/SvC8ZNJ3P_c Familiarize yourself with the debugger in your browser/user agent. You are writing a lot of JavaScript to create a full game, perhaps more than most web developers will in their entire careers. If you are not using a debugger, you are shorting yourself, and extending development time greatly. Enable the "pause on all uncaught exceptions" feature in your debugger; this should be the first thing you configure when you open the debugger for the first time. console.log() and alert() are simple to use, but breakpoints are better in every imaginable way; they are temporary, can be enabled and disabled at runtime without modifying the JavaScript, and allow you to inspect variable state at any point in the program's execution. Learn to follow stack traces so you can understand how the code eventually leads up to specific events, like uncaught exceptions. If your game runs slow, use the profiler in your debugger to pinpoint functions that take up the most time, and try to minimize how often the slow functions are called, or make the slow functions faster! If you've done the above and still need a little boost in the right direction, please include the full source code for your game. It is often not enough to paste code snippets in the body of your message, because there are times when the issue lies in an area of the code you hadn't considered. We can use the techniques described above to find and solve a very wide range of issues, but only if we are able to run the code ourselves. If you have found a true bug in the melonJS engine (not just a support request), please search the github issues for similar reports, and file a new ticket if you don't find anything: This is the best way to get bugs in the engine solved quickly. If you are having trouble with the tutorial, it has its own git repository and issue tracker:
  18. Hi, I am developing a game in Phaser 2.3.0. It is running smoothly on desktop, generally about 55-60 fps, and on android mobile (Nexus 4 and 5, Sony Experia) between 30-50 but I cannot get it over about 7fps on most iOS devices (tried iPhone 4s, iPhone 5, iPad3, iPad mini) An iPad Air runs at about 20fps which is OK, but not great. I am struggling to find out what is causing the slow frame rates so was wondering if anyone had any words of wisdom. It is using: p2 physics engine a 'Tiled' map with objects converted to sprites and collision objects. Texture packer atlases where possible I use large parallax backgrounds but swapping to smaller ones does not seem to have much effect I have read anything I can find on the forums regarding optimising games and tried anything that was suggested. Things I have implemented.. Detecting iOS and using sprites rather than TileSprites this got me from 1fps to about 7fps Switching from AUTO to CANVAS - game runs better using Canvas on all platforms Things I have tried... halving the width of all backgrounds - no change halving the width/height of all backgrounds and scaling up by 2 - no change switching physics engine to arcade - no change temporarily removing all the objects from the tilemap which have collision detection - no change changing all tiling background images to power of 2 - no change Here is the game - press space or click/tap screen to start sorry for the blurred graphics... Any pointers/help much appreciated.
  19. Here is my game: Curvatron. In that version (a bit outdated now) the snake's tail is drawn using a Bitmap Data. Every frame, it draws a sprite (small circle) under the snake's head, and erases the end of the tail with a clearRect. This is ugly but it was the fastest method I could find at the time, for mobile. I have been trying to find other ways to do this so that I can have a prettier version on PC, but I'm not sure which one is the best. I tried: Using Graphics, drawing the entire body with a thick line. The entire line is erased and then redrawn every frame. Same thing as 1, but with Bitmap Data. Using Bitmap Data, drawing small circles (not sprites) for each body point, for the entire body. The entire thing is erased with a clearRect every frame and then redrawn.Which one of these approaches is the best? Should I just stick to the original one? Another question: is there much of a performance difference between using a small sprite (16*16) for drawing in the BMD and drawing a circle with the same dimensions?
  20. I have observed that sub meshes can solve many issues for dynamically changing materials for parts of meshes. "Dynamic" changing of materials is meant to mean changing the material of parts of the scene content on demand while the application is running. It is understood by me that in order to increase general performance of the BABYLON engine, one should reduce the total number of meshes in the scene. This has certainly been an observed truth in my implementation of BABYLON for our application. We see that this truth, however can become problematic when several large meshes exist, and then many sub meshes are created for assigning materials to parts of the mesh. As I understand from forum research, empirical analysis, and reviewing BABYLON source code, the number of sub meshes is directly linked to the number GL draw calls. If the scene is organized with several large meshes, you will still see inferior FPS performance if many sub meshes are added to each mesh. This is true, even if many of the sub meshes reference a small number of materials. To visualize this problem, I will use the example of a large horse (metaphorically) being the entire contents of the scene. In this case, we will have a single mesh, containing all the vertices to draw this horse. Dynamically, we wish to change this horse to a zebra - where the vertices are identical to the horse, but instead we add black and white stripes to the horse. I have explored two options to accomplish this "zebra-fication". 1) (Non-submesh solution) Manipulating the index and vertex arrays themselves, it is possible to "pull" apart all the white parts of the zebra into a single mesh, and all the black parts of the zebra into a separate mesh. This performs wonderfully from a FPS perspective, but is not wonderful for the array manipulation itself. This is also NOT using the concept of sub meshes whatsoever. The problem, once again with this solution is not the render performance, but the operation of creating the two meshes. It can also be considered that once indexes are manipulated, we could retain the use of a single mesh, and since the indexes are reorganized and are concurrent with respect to their materials, we could also use 2 submeshes. 2) (Submesh solution) An elegant solution in terms of performance of the "zebra-fication" is to cut up the horse mesh into white and black stripes with sub meshes. The performance of creating these sub meshes is very good - as expected. The problem with this solution, as I introduced in the beginning paragraph, is that for each "stripe/submesh" we see a separate GL draw call. My post is intended to firstly inquire if there is a way to bridge the gap between the low cost for the zebra-fication with submeshes while also keeping GL draw calls low and therefore FPS high. As I understand it, I cannot currently have my cake and eat it too. My post is also intended to inquire about a possible enhancement to the BABYLON engine, which I am more than happy to code, test, and post to the BABYLON source. This would be an optional structure to pass multiple sub meshes to the rendering manager, where these sub meshes share the same material index. It should also be noted that these sub meshes do not need to have consecutive start/end indexes. Therefore, one could still enjoy the excellent sub mesh performance while "zebrafying", and also enjoy great FPS performance. I am more than happy to discuss design details with this enhancement if this enhancement would be allowed to the source code. It may also be possible to enhance the submesh class so that non sequential ranges of indexes could be added. This may be an easier and more elegant solution. With this solution, one could create two submeshes (one white, one black), and specify the various index ranges for each white and black stripe respectively. Thank you for your time
  21. Is there a performance impact of calling MANY 'scene.registerBeforeRender' for each scene component could be hundreds OR should there be ONE BIG scene.registerBeforeRender and i maintain my own array of scene components i want to 'tick' along and loop thru my array calling 'myobject.update' i would much rather not have to maintain an array of scene components for ticking and simple call: scene.registerBeforeRender(myobject.update) and scene.unregisterBeforeRender(myobject.update) for each and every scene component i am going to have??? Thanks for the info
  22. Hi, I'm new to Pixi.js and I'm trying to make a simple scene, in RPGMaker Style (with different tiles on the ground to draw the scene). I coded a little app that simply creates all the needed sprites, adds them to a Container (or ParticleContainer, tested both), adds the whole container to the scene, and manages a few keyboard inputs. The result is highly laggy... What am I doing wrong? I would happily look for other ways to do this but I think I'm doing what guides show, so I don't get it. Here is the code : Thanks !
  23. Hi guys Recently I'm testing my game on iphone7, I found out that the phone heat up very soon even though I have not started playing it, so basically there are just around 30 static sprites. When I reduced the number to less than 10, the temperature drop obviously. Eventually, this problem is resolved by changing the renderer from Phaser.AUTO to Phaser.CANVAS, but I don't understand why the canvas perform better than webgl, and why it only happens to iphone7(on iphone6+ or 7+ are totally fine), has anyone had the same problem can explain it to me?
  24. Hi All, In my game i am having a emitter which execute when user tap on the object. The emitter is slow in low level android phones. So I am planning to check the fps. If fps < 30 then don't show the emitter ELSE show the emitter. I am going to use the below line in create function so that Phaser will calculate the fps. = true; Will it reduce the performance of the game, because only when the advancedTiming property is set to true Phaser starts calculating fps, which is an additional work for Phaser. Thanks for your help. Joseph
  25. I see a framerate drop in the latest 2.5 compared to 2.4. It's not huge: about 5-6 FPS, but still noticeable.