Search the Community

I need an area where like half the screen will only do 50% the normal physics calculations! This will be useful for items inside water areas

Hi there, I have had a good look in the forums for this before asking, but I cannot seem to get my simple HTML canvas to run properly on my iPhoneX. My URL is here: http://lindsay.thefusion.works/ Initially I was trying to build a kaleidoscope (8 triangles making a square) but setting one triangle and then using the _cacheContext.rotate for the other 7 triangles meant that my iPhoneX was struggling to hit 3 frames per second. My old Galaxy S6 phone will render it flawlessly. The iPhone X will get really hot within a minute so it is definitely working overtime to try and keep up with a 3 year old Galaxy phone. This is in both Safari and Chrome on the iPhoneX. I have tried various optimisations and caching tricks but still cannot get the iPhone X to better than 3 frames per second. Does anybody have any hints or ideas on anything I can try to get my kaliedoscope working on iPhones? Thanks in advance, Lindsay.

Hello, When I move a sprite with Game.physics.arcade.moveToXY the sprite move about 3 times slower on mobile (chrome) then on PC. I've tried setting a speed and setting a maxTime but same result. Does anyone knows why?

Hello, For a game, I need to make a 8 * 10 grid with buttons as follow : var counter = 0; for (var i = 0; i < 8; i++) { for (var j = 0; j < 10; j++) { this.btnNumbers[counter] = this.game.add.button(50 * j, 50 * i, 'check-box-rounded', this.onNumberTicked, this); counter++; } } The "onNumberTicked" event add a sprite over the button to make it feel as "checked" (I don't use buttons frames for that because I need to overlay a bigger image over a text centered on the button). My probleme, is that with about 10 buttons, onNumberTicked is called quickly, but when I add 80 buttons, I notice a big delay, maybe about ~500 ms. Is there a solution to solve this issue ? Thank you for you replies, Vince

Hi guys! So I am trying to create a mobile racing game in Phaser. But the game has really poor performance on mobile. I tried to reduce a lot of things in the game and test if I get a better performance, but so far no success. What I have so far after reducing everything to absolute minimum is a sprite of a car (79x160 png image), a sprite for the background (100150 png) and in the update function I only scroll the background adding to the background y some value to move it down. I am running the game in CANVAS mode. Any thoughts what might be happening, or any tips or tricks that will improve the performance? Thanks!

I'm developing a simple game application using BabylonJS engine where I want to move the body parts of a human 3D avatar by using UI controllers. The application runs smoothly on the computer. Then I created an IOS application using phonegap and tried to run it on an Ipad. But it is really slow when it run on the mobile environment. Is there any mechanism to optimize the game to support the mobile environment other than reducing the quality of the 3D model.

Hi, I present you my game made in Phaser, here u are: redplanetgame.prv.pl I've finished it 3 months ago. It's a platform game, to collect all goals and kill enemies. When I was creating it, it worked fine, I mean, on full fps, but when I reach the end it drastically slowed down. I started few topic about this problem. I think, it's too many bullets or sth.(or my weird structure of code). When u inspect the browser, on bottom u can see all of my phaser code I've used. It's this: <script type="text/javascript" src="functions.js"></script> <script type="text/javascript" src="create.js"></script> <script type="text/javascript" src="update.js"></script> <script type="text/javascript" src="game.js"></script> <script type="text/javascript" src="jquery-3.2.1.js"></script> My question is: how to speed up whole game? Now it's seriously problematic. Another weird thing is that on many computers it works fine, on few it doesn't run completely (black screen instead of game), on other it freezes after few seconds, and in one the space+left arrow is not working xD

I finished making my game with Phaser, and it works very well on Google Chrome, and Safari, and Firefox on Desktop. But it shocked me on how slow it runs on Safari on iOS! Why is this? My game is an incredibly simple game, it does not make sense to me. Game: https://dolanmiu.github.io/flappy-bird-client/ Source code: https://github.com/dolanmiu/flappy-bird-client Thanks!

When using CreateGroundFromHeightmap... When i use the camera to move around on ground IS VERY SLOW and VERY CHOPPY... AND LOWERS FPS down to 15fps. This is my code for creating Ground: // Parse scene native mesh and heightmap terrains var terrains:BABYLON.Mesh[] = this._scene.getMeshesByTags("[TERRAIN]"); if (terrains != null) { terrains.forEach((terrain)=>{ console.log(terrain.metadata); if (terrain.metadata != null && terrain.metadata.properties != null) { if (terrain.metadata.properties.heightmapBase64) { var tempBase64:string = terrain.metadata.properties.heightmapBase64; var terrainWidth:number = terrain.metadata.properties.width; var terrainLength:number = terrain.metadata.properties.length; var terrainHeight:number = terrain.metadata.properties.height; var minimumHeightLevel:number = terrain.metadata.properties.minimumHeightLevel; var maximumHeightLevel:number = terrain.metadata.properties.maximumHeightLevel; var groundTessellation:number = terrain.metadata.properties.groundTessellation; var surfaceMaterialId:string = terrain.metadata.properties.surfaceMaterialId; var surfaceMaterialInst:BABYLON.Material = null; if (surfaceMaterialId != null && surfaceMaterialId !== "") { var material:BABYLON.Material = this._scene.getMaterialByID(surfaceMaterialId); surfaceMaterialInst = material; } BABYLON.MeshBuilder.CreateGroundFromHeightMap((terrain.name + "_Mesh"), tempBase64, { width: terrainWidth, height: terrainLength, subdivisions: groundTessellation, minHeight: minimumHeightLevel, maxHeight: maximumHeightLevel, updatable: true, onReady: (mesh:BABYLON.Mesh) => { mesh.parent = terrain; mesh.scaling = terrain.scaling.clone(); mesh.position.x -= terrain.position.x; mesh.position.z -= terrain.position.z; mesh.checkCollisions = true; if (surfaceMaterialInst != null) { mesh.material = surfaceMaterialInst; } } }, this._scene); } else { // TODO: Native Mesh - Note should try do all c# editor side } } }); } Any help would be awesome... as always

On certain computers, ones that wouldn't seem like they should lag, movement in my game is slow. When using `game.time.desiredFps = 30;` it also happens. My question is, how can I drop frames instead of making players swim through mud? Instead of looking ugly, it becomes unplayable. I tested this for p2, it also happens with that physics engine.

Hey. Was planning to do something big with babylon, but realized that chrome has got some problem with using all the computer's specifications, and may lag twice as much than a normal appliaction, so I wanted to kow how to (if you can) modify the render distance. thanks.

Hi guys, took a short hiatus on coding, now i'm back. I'm trying to move a cube through a curve. I built a simple "slow motion" function, where if the user clicks anywhere on the scene, the FPS of the cube's animation is slowed down. On the next click, the FPS returns to normal. (it's a toggling function). Somehow, it's causing a weird behavior. It's as if the 'slow-motion' cube's movement is entirely different from the regular cube movement. Take a look: http://www.babylonjs-playground.com/#14EGUT#22 (try clicking a few times, to see what I mean). My goal is to just slow down movement of the cube, and then increase it again back to normal. Any ideas on whats causing it, and how to fix this? Am I using the wrong functions?

Hey everyone, I'm trying to create a warehouse viewer app. I need to display A LOT OF meshes (I'm using only deformed cubes). I tried the optimization processes I saw in the tutorials, but I'm probably missing something, because my scene is slow (5 fps).. I'm currently using instances, I saw it was normally the best idea in my case (all the mesh will stay in their position, no move, no transform, no material change). Is it the right choice ? I tried with cloned objects too but the result was worse in my case (or I was doing something wrong?).. NOTE : I'm using "scene.pick()" which is using apparently a lot of CPU (or GPU), because in the app I will use the mouse lock API (and use the screen's center as the cursor). Here is the playground : http://www.babylonjs-playground.com/#KDCLN#3 I also have a bug on the floor, the shadow-like things, I don't know what it is, if someone has an idea.. Thank you guys

Hi All, I just started using PIXI a few days ago, it's a great tool and i've been having fun with it. I'm working on a little game (www.evade.mx) but it seems that with mobile browser (Chrome on android) the game simply doesn't work, before knowing PIXI, I was using Canvas without any other framework and the game ran well. I'm pretty sure there is something simple that i don't know of yet. Could you help me with some suggestions about what to check? Thanks in advance.

So I am having a bit of a performance issue with states. When restarting a state multiple times the game starts to show a noticeable slowdown which also slows down Chrome. This occurs with WebGL and Canvas. For a bit of context here, I am messing around with a tile based RPG style game and I have created a method of choosing which map to display by passing a bunch of params (such as the map, tileset, tilemap layers etc) to the state start and restart commands. I had also planned on using states for various other tasks such as a battle system. This init function for the state is here: (Though I'm not sure if it will help very much) And is usually called with something like "this.state.restart("Gameplay", null, null, "mapname", {"Tiled tileset name" : "Phaser tileset key"}, "tile layer", "collisions layer", "objects");" as an example. As I mentioned before, constant restarting causes major performance issues. So what I'm wondering is, is this an issue with how the state system works (or possibly even tilesets)? Should I find a better method of displaying maps instead of using states multiple times? Thanks.

Hi everyone, I have to code a special feature which is, I guess, quite tricky. Thus I'd like to ask for advice before diving into some "bad-patterned" solution. I have a game where a character can consume an item which will slow down time for everyone / everything except the character himself. So everything is going to move slowly around him (and animate slowly), for a given period of time. He won't get any other special bonus (he keeps moving at the same speed, jump as high as usual, only the rest of the world is affected). What would be the best way to implement this?

Curently, I am making a roguelike game and have a little problem with drawing(updating) the level on the screen. The map is two-dimentional array which generates at the begining of the script ( ). If the player hits an arrow button then movePlayer() function is called. Inside that function we draw the map (1 frame per player's move). That's where the trouble begins. It is starting to drop frames very badly when all the tiles are drawn together (less tiles - more drawing speed, but not enough to play the game). Here is some code: var mapSize = { // in tiles (one is 16x16 px) width: 44, height: 62};//...generating random arrayvar stage, renderer;start();var wallTexture = PIXI.Texture.fromImage("images/level/wall.png");var container = new PIXI.DisplayObjectContainer();function start(){ renderer = PIXI.autoDetectRenderer(992, 704, document.getElementById('canvas')); stage = new PIXI.Stage(); this.document.onkeydown = movePlayer; } function movePlayer(){ //... <-- basic movement here requestAnimFrame(drawMap); renderer.render(stage);} function drawMap(){ for (var i = 0; i < mapSize.width; i++){ for (var j = 0; j < mapSize.height; j++){ if(map[i][j] == '20'){ //'20' is a wall tile var wall = new PIXI.Sprite(wallTexture); wall.position.x = i * tile; wall.position.y = j * tile; container.addChild(wall); } //... drawing other tiles here } } stage.addChild(container); }Thank you, for your help and time.

Hi! I'm trying to make a simple sidescroller/endless run game with Phaser, based on this tutorial: http://html5hub.com/how-to-make-a-sidescroller-game-with-html5/ But my map are very very very big and when I start the game have a delay of 5 seconds before show the map. In the tutorial the author said: Even 70 is a bit too big. Same goes to the size of your game area. The only way to know is to try it out and if it’s laggy and slow, reduce until the game runs well. Have any alternative to make this? My map don't need to be this large, can I repeat when I arrive the end of map? Or load this map before they are displayed? Or any other alternative? thanks!

i creat about 400 boxes width ActionManager , it becomes very slow to move the camera and i do not want the event to bubble ， how can i do it？

How do I desired deceleration of the object in motion? Suppose when the object is in the water acts on it slowing. I tried to do velocity * 0.99. Slowing down there, but got out a lot of bugs. Now do so:this.obj.rotation = game.physics.arcade.moveToXY(this.obj, this.pointer.x, this.pointer.y, this.speed, 200);How do I make braking object? I've already rummaged

Holla, amigos! How to slow moving of bodies in P2 physics? I need to substrat 1 pts from body speed per second.

Hi everyone !I'm trying to display a part of a huge tilemap, so I think I have to add sprites in the render part like this : function preload() { game.load.image('tile', 'graphics/tile1.png'); } var map_x = 100; var map_y = 100; var map = new Array(map_y); for (var i = 0; i < map_y; i++) { map[i] = new Array(map_x); } var tiles = map; var speed = 4; var draw = true; function create() { game.world.setBounds(0, 0, 32 * map_x, 32 * map_y); cursors = game.input.keyboard.createCursorKeys(); mapen.generate(map, level, map_x, map_y); // Generate a map in map.js game.camera.setPosition(map_x * 16 - 600, map_y * 16 - 335); }// Update function with movements function render() { //TODO: render map var poscx = Math.floor(game.camera.x / 32); if (poscx < 0) poscx = 0; var poscy = Math.floor(game.camera.y / 32) - 1; if (poscy < 0) poscy = 0; for (var y = poscy; y < poscy + 23; y++) { for (var x = poscx; x < poscx + 39; x++) { switch (map[y][x]) { case 0: break; case 1: tiles[y][x] = game.add.sprite(32 * x, 32 * y, 'tile'); break; } } } }}; When I move the tilemap, the game become slower and slower... I tried to display all the tiles at once in the create() part but it's slow too :c I think I need to create in memory each tile and then display the one I need or delete the useless tiles, but I don't really see how I could do that ! Thanks for your help !

Hi there, We've used Pixi.js a couple of times already in commercial projects because its so beautifully fast. Unfortunately one of the projects we're currently working on seems to be bucking the trend and we are struggling to get to the bottom of it. The app consists of a continuous strip of panels that scroll left to right - we're using DisplayObjectContainers for each panel and then loading in a bunch of images (in layers) and displaying them as sprites within that. Performance was excellent until we started to build more panels where it felt like some sort of memory threshold was crossed on the iPad Mini/2. The issue we have is that we are going to need 100+ panels within our strip - so memory management is of the upmost importance. So far we have 38 and the frame rate has already dropped to an unusable level. We are of course loading in each set of layers only as the user scrolls to that point in the strip and destroying panels they have already moved past but this doesn't seem to release the memory back to the browser fully. We are removing the sprites from the display list, destroying all the PIXI.Textures, removing them form the PIXI.Texture Cache and nulling everything but the frame rate just slows the further in you get. If you skip straight to the end (skipping the need to load all the images on the way) it stays fast. Here's part of the 'unbuild' function that exists within each panel: //console.log(PIXI.TextureCache) for (var pane in this._panes) { //console.log(this._panes[pane].art.children.length) for (var layer in this._paneData[pane].layers)//go through all the layers in this pane { PIXI.Texture.removeTextureFromCache(Game.path+'panel-assets/'+this._paneData[pane].layers[layer].art) //console.log('removing', Game.path+'panel-assets/'+this._paneData[pane].layers[layer].art) } for (var bubble in this._paneData[pane].bubbles)//go through all the layers in this pane { PIXI.Texture.removeTextureFromCache(Game.path+'bubbles/'+this._paneData[pane].bubbles[bubble].art) //console.log('removing', Game.path+'bubbles/'+this._paneData[pane].bubbles[bubble].art) } this._panes[pane].art.alpha = 0 while(this._panes[pane].art.children.length > 0) { this._panes[pane].art.getChildAt(0).texture.destroy() this._panes[pane].art.removeChild(this._panes[pane].art.getChildAt(0)) } for (var layer in this._paneData[pane].layers)//go through all the layers in this pane this._loadedLayers[this._paneData[pane].layers[layer].art] = null for (var bubble in this._paneData[pane].bubbles) this._loadedBubbles[this._paneData[pane].bubbles[bubble].art] = null //console.log(this._paneTimelines[pane].getChildren()) var timelines:any[] = this._paneTimelines[pane].getChildren() for (var timeline in timelines) { timelines[timeline].kill() timelines[timeline] = null } } timelines = null this._loadedLayers = {} this._loadedBubbles = {} if(this.timelineAcross) { this.timelineAcross.clear() this.timelineAcross.kill() this.timelineAcross = null } if(this.timelineAmbient) { this.timelineAmbient.clear() this.timelineAmbient.kill() this.timelineAmbient = null } It will also run beautifully smoothly (60fps) if we generate 100 panels and reuse the same image assets for each one. I realise this may be a larger issue with mobile safari and its memory limitations such as I have read about here: http://stackoverflow.com/questions/10582502/javascript-runs-slowly-in-safari-ipad2-after-loading-200mb-worth-of-new-images and here: http://engineering.linkedin.com/linkedin-ipad-5-techniques-smooth-infinite-scrolling-html5 But these articles refer to HMTL5 image objects in the DOM. I was wondering if there is anything else I can do in terms of getting mobile safari to forget image data that has been loaded and viewed via the PIXI ImageLoader or if we are going to have to completely change approach? Any suggestions would be really appreciated! Thanks