mariogarranz

I have a very big texture for a Spine animation that causes a ~400ms delay whenever it's rendered for the first time. I have been trying to avoid this by trying to use prepare.upload in multiple different ways, but this just does not seem to make any difference. prepare.upload resolves within a few ms (~10ms measured using performance), then when adding the animation the big freeze happens again, and if I profile the performance I can see all that delay is spent uploading the texture to the GPU. This is the current test code I'm using: const sprite = PIXI.Sprite.from("/assets/bigwin/muscle_logo.webp"); const t0 = performance.now(); app.renderer.prepare.upload(sprite).then(() => console.log(performance.now() - t0)); Any idea on what could be going wrong? As far as I understand this is exactly how it should work.

Thanks for the hint @Yurii Bilas. I assume using web workers should work, but I was wondering whether prepare.upload can load the texture in the GPU memory without blocking the render loop, or it's just meant to be some sort of preload functionality before actually rendering anything at all.

I have a big texture using a Spine animation (3905 × 2948). When its played for the first time, it causes a noticeable frame freeze, for around 1-2 seconds on slower devices, then it goes on. Performance debugger shows the issue is BaseImageResource.upload taking all this time to complete, making the animation frime very long. I tried adding prepare.upload, hoping this would let the render loop to keep going on while the GPU texture was loaded, but after several tests I came to the conclusion that this is not what prepare.upload is meant to do. It will properly resolve when the texture is uploaded, but the app won't run the render loop in the meantime. Is it correct that I cannot use prepare.upload for this, or may I be doing something wrong?

I could replicate this issue in this CodePen https://codepen.io/mariogarranz/pen/Yzqjboj In this example I create one ParticleEmitterManager and it into a Container that had its scale modified. Then I add 3 ParticleEmitters to this ParticleEmitterManager, all of them with the exact same settings, but everytime a new ParticleEmitter is added, some offset is added to its positioning and scaling, so in the end you can see all 3 of them in different spots and scales. This seems like a bug to me, but maybe I got something wrong? My game uses a container with a scale for the board of the game and it's being impossible to have the particles display properly over it, unless I use 1 ParticleEmitterManager for each ParticleEmitter, which seems too overkill.

I'm working with 2.6.2 and drawing some webfonts directly instead of bitmap fonts. I know rendering a vectorial font is an expensive operation and I was thinking of just rendering it to a separate BitmapData and then use the BitmapData as an image instead, but since Phaser 1 performance on text rendering seems to have improved a lot, so I was wondering if these optimizations are maybe already done behind the scenes by Phaser, but didn't find anything on the source code so far. Does anybody know?

I'm trying to create different groups of tweens that I may want to pause and resume based on the group they belong to. For other stuff such as timers, I'm creating my own Phaser.Timer objects, so I can just add Phaser.TimerEvent objects to them, then by just pausing the timers that I want, I can control all the different events easily. However I don't see an easy way to do the same in Phaser. Right now I'm thinking of creating arrays of the tweens myself that I will later loop trough to stop or resume them, but I was wondering if there is any built in functionality that would allow me to do the same?

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.

So, I'm working on a project that will make use of Kinect, and I would like to translate certain coordinates I'm calculating based on the input recieved from the device into x and y values in the screen. In order to simplify the code, I thought the easiest way to handle it would be to use some pointers whose position would be updated by myself in code, and then rely on Phaser's event detections for overlappiing. Of course I can just use Phaser.Point objects and do the overlapping calculations myself, but I was wondering if there's an easy way to control some Pointers myself, as the InputManger pointer list is meant to be read only.

@chg Thanks a lot for your reply. I've barely worked with 3D environments, so I'll dig into it definitely. Anyways, correct me if I'm wrong, but I understand that the z value you're saying, which depends on x, y and layer index, I guess, must be recalculated when the tile is moving, right? Because that's something I would like to avoid.

@chg Maybe you did and I don't understand it. What I can tell is every tile must be drawn only AFTER: 1 - All tiles in all layers with lower column or row value have been drawn, except in case they intersect (they share a column or row and are close enough to visually overlap). 2 - All tiles in lower layers which intersect with it have been drawn. I don't think it's just about the view vector, but maybe I'm not understanding your suggestion. Take this example I'm attaching. I drew the zIndex corresponding to each tile. Tile 2 and 6 are on the highest layer, yet tile 2 was drawn before most of lowest layers tiles, because it has a lower row and column. Tile 6 has a lower column and row than tile 5, but must be drawn after, because they are intersecting. @drhayes I'm not sure I can do the moving layer, since finding it's zIndex sounds as complex as the rest of the problem, but it may be. Thanks a lot for all your replies, maybe we don't completely understand each others because the problem is a little bit complex to be discussed here, but all your replies are very valuable to me!

Thanks everyone for your replies again, the problem is actually more complex than it seems and maybe I didn't express myself very clear, but I'm afraid most answers don't solve it. What @Tom Atom suggests doesn't work in a 3D matrix of tiles, and just adding the depth as another value doesn't work either, because tiles on lower layers must be drawn AFTER tiles on higher layers with lower column or row, but BEFORE tiles on higher layers with higher column or row. That's the generic logic. However, when tiles are overlapping that creates a special case, because even if a tile is on a lower column or row, it must be drawn AFTER the tile that it's covering is drawn, which breaks the whole ordering process (you can't follow a straight pattern to assign z indexes anymore). @drhayes, what you suggest doesn't work either. That's the way I did it on the game I showed in the first image. What happens then is that as soon as the tile starts moving it is drawn on top of all other layers, but what if that tile is partially covered (ie: there's a tile one row closer to the player's view and in a higher layer) then that tile is suddenly drawn on top of it, which breaks the whole 3D effect. I was thinking about it the whole weekend and I'm not sure if there is any solution to it, but my best guess is building a data structure that detects tiles that should be drawn behind each tile. Then start assigning the lower z index to the tile that does not have any tiles drawn behind, and remove the dependency from this tile for all tiles that required it to be drawn first, repeating the process until all tiles have been assigned a z index. If there is a solution to the problem then this algorithm should find it. However I doubt it's a very efficient system, and should be called many times during the game because more layers of tiles keep being added to the board.

Thanks for your replies. I forgot to mention something that's very important to this problem: There is an animation where a tile moves vertically. This means I can't have layers (the example game image has layers) because a tile can animate vertically so it should still be drawn on top of tiles being on higher layers on columns that are to its right. I created a sample image I'm attaching. The yellow tile is the reference one. Red tiles are the ones that should be drawn behind it. Green one is drawn on top of it. As you can see there is a tile on a superior layer that's drawn behind it. This is so because when the yellow tile moves up following the arrow direction, it should still be drawn on top of it to keep the perspective. The picture as it is, I already solved it with the sorting algorithm added on my original post. But things get a lot weirder when tiles can be on intermediate positions and I'm starting to think it's impossible to solve with Phaser's sorting system.

So, I'm trying to achieve a realistic mahjong 3D tile sorting with Phaser. Tiles are sorted on layers (the lower the layer index, the higher), and have a column and a row value as well. Every tile occupies 2 rows and 2 columns, so they can overlap horizontally and vertically with 2 tiles at the same time. The thing is I can't find a sorting algorithm that works in all situations. I came up with this messy function that works in almost all cases: if(a.row === b.row - 1 || a.row === b.row + 1){ return a.layer.index < b.layer.index ? 1 : -1; } else if(a.row > b.row){ return 1; } else if(a.row === b.row){ if(a.col === b.col - 1 || a.col === b.col + 1){ return a.layer.index < b.layer.index ? 1 : -1; } else { if( a.col < b.col - 1){ return 1; } else if(a.col <= b.col){ return a.layer.index < b.layer.index ? 1 : -1; } else { return -1; } } } else { return -1; } However, when there is a tile that is covering another 4 tiles on the lower layer (one quarter of each), the whole sorting algorithm becomes unpredictable and creates weird situations. I know the customSort function does not compare all tiles one to another, but inferes their z value with the sorting algorithm. So maybe what I'm trying to achieve is technically impossible with Phaser? This screen shows an example game using the same graphical tile positioning.

I also opened a topic about the exact same thing with your exact same conclusions: http://www.html5gamedevs.com/topic/18183-tweenmanagerframebased-not-working-as-expected/

After upgrading some games to Phaser 2.4.3 we noticed some animations were suddenly playing really fast or really slow (depending on devices). Some bug fixes regarding this were added on 2.4.4, but the problem was still there. This bug seemed to affect only Tween animations so I checked the docs and found this value: TweenManager.frameBased: According to this, the default behavior should be the same as in previous versions of Phaser, however it seemed to be the opposite, since the animation duration was now being dependant on the speed of the device. I tried setting frameBased to true and everything appears to work fine now (even though I'm still sending the time parameter as milliseconds, not in frame numbers). Am I missing something here or is the functionality bugged?

Thanks for your reply alagatar. My main question is how do you detect the actual window size, since it seems to be returning a value that does include the part of the window covered by the bottom bar. I get from your message that if you add some delay after the resize this value is correct?

I'm developing a card game that is played in landscape orientation. In iPhone the game goes full screen as soon as it is in landscape, but because cards to be played are positioned at the bottom of the screen, pressing on them triggers the appearance of the navigation top and bottom bars again. It is really necessary to have input in that area of the screen, so changing it is not an option. Also, when these bars appear game doesn't rescale properly. I assume Safari is sending a wrong window.innerHeight value, because part of the game is still displayed behind the bottom bar. Is there any way to detect the actual visible area in this case? How do you guys deal with iOS 8 safari in landscape? Thanks in advance for any help

Android stock browser has a bug that causes the RAF to freeze when it loses focus, even it the tab gains focus again. I created a workaround for this, forcing raf.stop(); and raf.start(); everytime the tab gains focus. This workaround worked fine until I updated some games to version 2.3, then it crashes games with the following error: Uncaught TypeError: Property 'cancelAnimationFrame' of object [object DOMWindow] is not a functionI checked the RequestAnimationFrame update history, and nothing has changed there in version 2.3, but the same game doesn't have this bug with older versions. Any idea on why this may be happening just with 2.3?

Thanks stauzs. I use Images whenever I can. In this case, however, I need physics on them, which means they have to be Sprites I'm afraid.

Hey guys, thank you all very much for your responses. @MichaelD: I know it's something about the game itself, because I have made many other games that work on tablets and smartphones and they performed well, as this one does when I have less than 100 sprites created. About tweening, well, these performance issues happen even without animating, but I find tweening less expensive than physics and use it a lot. I guess I could make some improvements by recycling tweens (though Phaser Tween system is not very friendly with this idea AFAIK) but yet performance sucks even without any animation so that's definitely not the problem. @ZoomBox No, I didn't try that. I never use kill, just set exists and renderable to false, I'm not sure if there's a big difference between those, but I will look into it and give it a try. Thanks @spinnerbox Yeah, I already use atlases for these images, they are all inside one single atlas. But thanks for the tip

I have made different tests without any success. Obejcts are not Sprites, but objects that extend the Sprite class, so I modified the whole class to use Sprite as a property rather than extend it without noticing any difference in performance. Completely disabling physics and collison checks didn't make a difference either. These are the results of profiling the game in my computer with Chrome, both are visually the same, only in the first one I create all the sprites (about 350), and in the second one I just create the sprites that are inside the screen (around 100), which runs really smoother: Any hint or idea would be very much appreciated because I'm absolutely lost right now.

Yeah I have tried both and different devices. WebGL is way faster, but even in WebGL I can see a clear performance boost when my board has 20 sprites to when it has 200 sprites, even if only 20 of them are renderable and have a body. The game does mainly have just an image for background and then the sprites of this group, even removing the whole update logic performance stays the same, (I can see it when showing GUI dialogs with animations for example). I did some profiling in the iPad, this is how it looks: Purple is code execution time, red is drawing time. As you can see there is a fast switch between updating and drawing in the Menu state, but as soon as I enter the Game state, the time between draws goes up to 20 -25 times longer, taking 400ms in between each draw. I can't profile any deeper with Safari (I think). In my PC it works fine with Chrome, I did some debugging too but saw nothing too conclusive.

Just in case it helps understand better what I mean, the game is a bubble shooter where the board can go both up and down (not just down as in most bubble shooters) and you can shoot the bubble to the upper side of the screen where the board is not visible, which is the reason why I need sprites to be there even if they are not displayed and can't just use a recycling pool of bubbles when they are inside the screen.

I have a game with many sprites at the same time (around 100-200). Most of them are not even inside the screen, but I need them to be created just for game logic reasons. This logic is only applied on certain events, not in every update call. Game resolution and the amount of graphics being drawn is almost the same as I've had for any other game I've developed before, but performance is way slower, specially in a "New iPad" with iOS 7. I've tried everything, setting all sprites to invisible, disabling their bodies, etc. but even then performance is slow. If I reduce the number of sprites to 20 or so, performance is perfect, even though I am often just rendering 20 of them. Disabling physics didn't solve the issue either. Any idea on how can I improve the performance here?

OK thanks Rich, I did a quick search on the forums and found some posts that said that as long as the body was enabled it should keep working so that's why I guessed it was wrong.