Jump to content

[help] Problems rendering sprites


Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...