[help] Problems rendering sprites

[palanolho]

Hi everyone,

 

I have recently started to play around with pixiJS but I'm getting some issues and I do not understand why they are happening.

If anyone with more experience would be able to help with one or more of the problem I would really appreciate it.

Here is the code so you can have a look and modify to see the problems: https://jsfiddle.net/palanolho/1Ltu9rmd/

I have added comments like "// ===== PROBLEM 1 =====" to highlight where i'm having the problem

 

Just to give you some context, I'm playing around and trying to build a slot machine game and my code is based on the example provided on pixiJS page (https://pixijs.io/examples/#/demos/slots-demo.js)

 

Problem 1

You will see that I have a function called initializeSymbolTextures() which I call immediately before doing anything in the init(). The only thing this function does is to generate sprites based on the images I loaded with the "pixi loader". Before, I was doing that just below the var slot_symbols_sprites = new Array(); (outside the function) but for some reason, it looked like if the sprites were not available and nothing was being rendered. If I define these sprites directly inside the init() also works.

Does anyone have any idea why this happens?

 

Problem 2 [Solved]

this problem is actually multiple but I think that they may be all correlated (somehow)

Issue 1

On the line I highlighted the problem "s_sprite = slot_symbols_sprites[i+1];" you will see that I'm using i+1 to define the index of the sprite to be displayed (and that generates the output you can see). If I change it to j+1 nothing is rendered, but I checked and the code seems to get the correct value and sprite.

Any ideas?

Issue 2

looking at the code you will notice that it should be drawing 5 columns each one with 4 rows, however, as you can see, it's only drawing the last row (for some reason).

If you comment the line "s_sprite = slot_symbols_sprites[i+1];" (which is actually what I intend to do but was trying to figure out the issue) you will notice that the grid is randomly drawn. If you run it multiple times you will see that every time he draws randomly and you will see that he actually populates symbols on all rows and columns but with lots of blank spaces, and the reels_config doesn't contain any blank spaces (nor "-" which corresponds to blank symbols).

Any ideas?

 

Problem 3 [Solved]

Note: To see this problem, please uncomment the code bellow "// ===== PROBLEM 3 =====" and also the 2 lines after "app.stage.addChild(reelContainer);"

By the code, I was expecting the engine to render the reelsContains (with the slot symbols) then the test_container (I create just above) and then the background (that I also create just above). However, what is happening is that it only renders the test_container and if I comment the code that creates the test_container and background, only the reelsContains is rendered, and the background doesn't render in any way at all.

Any ideas?

 

Many thanks in advance to anyone that is willing to provide some help

- Miguel

[Exca]

In the initializeSymbolTextures function you are building 7 sprites and using those in the reels. What you should do is build textures in there and then generate sprites for each of the reel. Each instance of sprite is rendered in one place only. So basically in the initial configuration when you are adding sprites (rc.addChild(s_sprite)) you are moving the same sprites around from one container to another. You can fix this by changing the sprites to textures and then when initing a single reel just do s_sprite = new PIXI.Sprite(texture).

So in short: Whenever you want to render a texture to multiple positions on screen, you need a sprite per position. Recycling same instance of sprite just means you are moving one sprite around the screen and it will be rendered only on its final location.

[palanolho]

THAT I didn't know. I was actually expecting that when you add the child it was adding "an instance" of it and not THAT exact sprite.

That explains it. Will work on that,

Thanks a lot for the help!!

[palanolho]

@Exca thanks for the help. I was able to sort all the problems I had except the Problem 1 

Not really understanding the reason for that happening  but since I have I working workaround, I can leave with that (until I find the answer)

Cheers

[unrealnl]

The resources are not available before the resources are loaded. I think thats the issue at Problem 1 right?

[palanolho]

56 minutes ago, unrealnl said:

The resources are not available before the resources are loaded. I think thats the issue at Problem 1 right?

 

Would make sense and would explain it, I think.