Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Spritespin and the canvas renderer do not work on Android Chrome at high resolutions. #43

Open
moleCuleFFF opened this issue Apr 5, 2018 · 6 comments

Comments

@moleCuleFFF
Copy link

moleCuleFFF commented Apr 5, 2018

I tested using my spritesheets to reproduce the issue on your site by changing the source value on your examples page, "http://spritespin.ginie.eu/samples/#/basics-spritesheet".

I can confirm I reproduced the issue.
I managed to fix the issue by reducing the total resolution of the spritesheet from 8960x4680 to 4480x2340.

I've included links to the two spritesheets so you can confirm the issue yourself, both sprite sheets have a total of 180 frames on 14 columns.

https://s3-eu-west-1.amazonaws.com/frontier-platform-hosting/360-sprite-tests/dino-320-spritesheet.jpg - Working

https://www.jurassicworldevolution.com/files/360-sprites/pachycephalosaurus_spritesheet.jpg - Not Working.

Hope this helps, and let me know if you need any more information.

@giniedp
Copy link
Owner

giniedp commented Apr 5, 2018

thank you. As mentioned in #41 this is an issue with the GPU limitation on some devices. Unfortunately SpriteSpin can't do anything about that limitation. The only solution is to reduce the size of the image and/or split the sheet into multiple images.

I just pushed a new version v4.0.4 that can handle multiple spritesheets. 380dd31

For testing i used your example file and created 4 spritesheets where each contains 50 frames in a 5x10 grid. This results in 4 images 3200px by 3600px each. This leaves some space in the last image. SpriteSpin needs an additional parameter for this to work, the framesY

For now it is important that all images have the same size and layout.

spritespin({
  frames: 180, // the total number of frames
  framesX: 5,  // number of frames in one row for each sheet
  framesY: 10, // number of frames in one column for each sheet
})

Hope this helps you to get your job done.

@moleCuleFFF
Copy link
Author

moleCuleFFF commented Apr 6, 2018

Thats great cheers for that, I think for now and because the people populating and managing content on this site aren't too tech savvy Ill just pump out a lower res version for mobile devices.

Again thanks for your quick responses.

Also if you want to use the site in any examples etc feel free.

@moleCuleFFF
Copy link
Author

Closing Issue

@giniedp
Copy link
Owner

giniedp commented Apr 6, 2018

i reopen it, since i want to write a documentation and possible workarounds.

May i use your huge spritesheet for this?

@giniedp giniedp reopened this Apr 6, 2018
@moleCuleFFF
Copy link
Author

Unfortunately I can't give permission to use the spritesheet in the public domain :( , It is easily downloadable from the site as its public, and if you went ahead with this it would be your decision, but it uses Universal Studios/Frontier assets and so they may have something to say about this :/

If you want me to pump out a more generic HUGE spritesheet for you to use that shouldn't be a problem ?

@giniedp
Copy link
Owner

giniedp commented Apr 9, 2018

Yeah, thats what i thought. Thanks for reporting back. I wont use the images without a license.

If you have some interesting scenery that you can share with me for demonstration purpose, i'd be happy to use that.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants