-2

So I did some research but didn't found what I was exactly looking for. I found this question to see how to preload images (and will probably work for video as well, I guess?)

So the question is should we preload the ressources (video/images and not css or scripts) ? I'v made a gacha system (like gacha games on mobile) where you 'pull' characters and a video loads just before every 'pulls'. In local everything was fast and cool but now that I hosted it and tried it ... it was so long because nothing was already computed.

There are too many images to just preload the all at the start of the "game" I though to how to solve it and I think that I should

  • Check every character that someone will get, prompting some loading screen
  • Preloading the ressources associated with the list of chars from step1
  • Dismissing the loading screen and doing the actual pulls

Does this look ok? Are there other ways to do it? I searched but didn't found how other people handles the problem (I kinda suck at searching stuff :/)

Gary
  • 13,303
  • 18
  • 49
  • 71
Altan4444
  • 3
  • 1
  • 2

1 Answers1

0

Well, you already mentioned it. You will need to pre-load all the content you need to display "fast" to the user. Put a loading screen before your game, make a list of all the critical resources and load them. You can load images and videos by creating their respective objects and listening to the "load" event. When all your critical resources have been loaded, start your game.

Make sure your server is configured correctly with long caching headers, so your players don't have to download the resources again, wen re-visiting your game.

You can even go ahead and continue loading not so critical resources in the background when the game has already started. If a user runs into an not yet loaded graphic/video, show a placeholder instead and maybe re-queue the missing resource to the top of your loading list.

You can do a lot of stuff for load optimization here. First advice I would give: make your assets as small as possible by using for example kraken.io for images (not sure if there is something similar for videos).

Also try to enable http/2 on your server - this will give you a boost in loading speed when using many assets. If you can't use http/2 for some reasons, try to combine your assets - look up spritemaps for example. Videos could also be combined into one and you play only the parts that you want to play in the respective areas of your game.

Christian Engel
  • 3,738
  • 5
  • 28
  • 44
  • Thanks for the fast and good answer ! That would definitely help me now and be useful in the future, taking notes :D – Altan4444 Aug 01 '18 at 22:00
  • Maybe try out a ready to use game framework like Phaser or playground.js - they come along with built-in asset loaders! – Christian Engel Aug 02 '18 at 08:19