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?