craftyjs
Possible texture switch issue
In my game (a side scrolling shooter) sprites start disapearing, and I have no clue where to look / debug (there are no error messages)
http://matthijsgroen.github.io/game-play/dist/index.html
In a section before the second bridge in the city, rockets are fired at the player (single sprite, no sprite animation, image contains only this sprite) https://github.com/matthijsgroen/game-play/blob/master/app/images/rocket.png
These rockets are shown fine, but when the boss appears under the second bridge, and starts firing the same rockets, the rockets are not shown anymore (only the particle effects).
Also sometimes when the boss has to switch to a different damage sprite, suddenly he becomes invisible.
Any clue where I could start a debug action?
I'd start with console.log(Crafty("Rockets")) and look at the rockets' data. If anything important is null or NaN they won't show up. I can't find the boss in your code structure and the game is pretty slow to get to the boss so I haven't checked this myself.
Update: It works fine for me. On the other hand I passed by where the boss was twice and he didn't show up the first time, and you set lives to 2 at the start but display 3 so it looks like you lose two lives the first time you lose a life.
I noticed that the rocket was showing if you use a credit to get there (thus not being in one single playthrough from beginning to the boss). The thing why I find this weird is that it is a single script that runs the separate rockets and the rockets of the boss.. Both create a 'Rocket' entity, that should take care of the sprite.
in the code structure the bossfight is in https://github.com/matthijsgroen/game-play/blob/master/app/scripts/lazerscripts/stage1/stage1boss.coffee
I'll start on figuring out why getting from beginning to boss in single life somehow breaks the sprite, and when using a checkpoint it is not an issue...
Weird thing is that the mines have exact same setup, and do not have that issue (but they are animated, and the rocket is not)
Hmm its showing this image https://github.com/matthijsgroen/game-play/blob/master/app/images/large-drone-wing.png
On the other hand I passed by where the boss was twice and he didn't show up the first time,
Fixed
and you set lives to 2 at the start but display 3 so it looks like you lose two lives the first time you lose a life.
Hmm never saw '3' ? I know that at the moment when you die the amount of lives in the HUD has a delay before updating (will be fixed later)
Both are not Crafty related. So far I only learned:
The issue is when played in a single playthrough (without using credits and starting at a later checkpoint) And then the rocket sprite is somehow replaced by the reload animation sprite-sheet.
I'll try to figure out why it only happens on a single playthrough, and not when started at a checkpoint.
On further inspection:
Crafty('Rocket').get(0).__image
It returns 'images/rocket.png'
While it shows the large-drone-wing.
Removing compontents or calling 'sprite(x, y)' they all have no affect. Somehow the loaded rocket is broken, and I cannot do anything to fix it. even calling Crafty.load again does nothing.
So It looks like you currently load assets throughout the time the program is running, including rocket.png, right? Have you tried loading them all at start instead?
It might also involve unloading assets-- you can't load onto a defined name if you haven't unloaded that asset first. I haven't checked what names you're using.
The names are unique. I just did a testrun when rendering in Canvas, and then the issue is not there (But I want to use WebGL though)
I know WebGL is particular about requiring sprites explicitly after requiring WebGL in entities. I'd expect it to throw an error if that was the cause, though.
I wait for the assets to be loaded before I instantiate the entity, else I get webGL errors (and invisible entities)
From everything you've said, it sounds like it involves some combination of using WebGL and having the game run for a while.
This could be a bug in how we handle swapping textures when there are more than the graphics card driver supports at one time. I'd try to examine what's happening with Crafty.TextureManager.
Another thing to explore would be the program property of the rocket entity. It should have information about what texture it's bound to.
Well the seperate rockets and the rockets with boss are just 5 secs apart... When the boss is loaded somehow the sprite-sheet with the reload animation is overriding the rocket texture or something
I added an extra border of transparent pixels around the rocket.png sprite, and now the problem seems to be gone? It still seems weird to me, since it was showing correct before...
Thanks for assisting me with the debug though! much appreciated!
I do not have that many graphics in it yet, so I'm curious if it will happen again when I start replacing the blocks more and more (and change the current graphics with more decent ones). I'll reopen this issue when I see behaviour like this again.
Hmm the issue is still there.
I've seen it now in different forms on different machines.
The local development version build has the issue of the rocket sprite being replaced by the 'large-drone-wing' texture,
on an older machine at my work, the dark water spot ( to indicate enemies under water ) was replaced by this same 'large-drone-wing' texture using the online version.
The online version locally somehow works fine.
It's still behaviour I cannot fully understand. When it happens it always happens in the same way. but its still different in different builds on different machines.
Locally you should make sure your browser isn't caching any files.
Considering the dimensions of the image changing caused a fix, it's probably worth mentioning that webGL only makes full functional guarantees about power-of-two dimensioned textures (webgl textures being what it maps sprites to). A few things don't work for non-power-of-two textures, detailed here. I don't think that's the issue though, because I think that also would have thrown an error.
The texture manager prefers to swap out smaller images, so if the bug is there adding those pixels could have changed the behavior.
After how many images should he begin to swap? At the moment I have only 13 textures, but it will be a lot more in the future. Op za 9 jan. 2016 om 18:31 schreef Tim Martin [email protected]
The texture manager prefers to swap out smaller images, so if the bug is there adding those pixels could have changed the behavior.
— Reply to this email directly or view it on GitHub https://github.com/craftyjs/Crafty/issues/1000#issuecomment-170262032.
I'm working on a webgl project with upwards of 300 images, most around 30x50, and haven't seen this behavior, but we also exclusively use spritesheets and load everything at start.
I placed both images (shadow and rocket) in a sheet image now.. I'll monitor if this fixed the problem
After how many images should he begin to swap? At the moment I have only 13 textures, but it will be a lot more in the future.
AFAIK it depends on what a particular graphics card (+driver) supports. For WebGL performance, you want to favor a few sprite sheets over lots of individual images in any case.
I've placed both small images in a spritesheet, and now the issue has not occured anymore.
I get why having a few good spritesheets would be better than having a lot of smaller assets, but when I have enemies of all shapes and sizes, with parts of them having a sprite animation, I don't think crafty supports it yet to have those all in one sheet.
e.g. having
https://github.com/matthijsgroen/game-play/blob/master/app/images/large-drone-eye.png https://github.com/matthijsgroen/game-play/blob/master/app/images/large-drone-wing.png and https://github.com/matthijsgroen/game-play/blob/master/app/images/large-drone.png
in one sheet would be awesome.
You can put them all in one sheet with smaller dimension labels and explicit width and height sprite calls but with three separate consistently sized entities three sheets will have the easiest formatting.
Having multiple sizes in sheets works (I do it for the Sun sprites), but not for SpriteAnimation, where you reference to images with an x, y index of the tile.
You should be able to define multiple sheets per image, if you have mixed sizes.
WebGL cares about the image URL only.
Do you have an example how that looks like?
https://github.com/matthijsgroen/game-play/blob/master/app/scripts/components/entities/LargeDrone.coffee#L15
The reels have only sprite coordinates within a sheet right? (or can you pass in an array of names that I did not know?)
I think the implication is you make multiple load calls to the same file name.
I created a system where I can have multiple sheets for the same image. This way I can combine multiple sizes of sprites in one sheet, and have animations and other default Crafty things working as expected.
Definition of sheets: https://github.com/matthijsgroen/game-play/blob/master/app/scripts/scenery/CityAssets.coffee#L68 Sheet image: https://github.com/matthijsgroen/game-play/blob/master/app/images/large-drone.png
Loading mechanic for multiple sheets for single image: https://github.com/matthijsgroen/game-play/blob/master/app/scripts/lib/LevelGenerator.coffee#L49
The trick is to load the image once, and apply the 'Crafty.sprite' call multiple times referring to the same texture but with different sprite objects.
Since I am now limiting myself in amount of sprites used, I haven't seen this issue anymore.
I suspect there is a bug with texture switching somewhere -- I'm going to reopen this until I can at least attempt to reproduce.
I've seen this issue again last week, but it was somehow related with an eventhandler in the collision detection that gave an error (without showing). I think on its own, the rendering of WebGL is really fine.