HTML 5 question

Hi everyone, my question is about HTML 5, is it possible to use an external pack file to minimize the constant download everytime the game is accessed on the browser?

For example, a card game made with HTML5, that has an option to download a pack of images for all the cards, so the game acess that pack and don't need to download it anymore.

If this is possible, does construct 2 has that option?

Thanks

Construct 2 already caches the game's files so that the game only has to be downloaded once.

You would have to go out of your way in order to NOT make the browser cache stuff.

In other words, yes, construct has that option and it comes activated by default.

If you mean like packages which you download only when the level needs it.. It's not available yet.

Of course i know that the browser caches the game after loading, but caching isn't permanent and "expires" after some time, i play flash games very often and the longest time that it stayed cached was 2 days, so it's extremelly different to cache the game and to download a permanent pack of files and use it externally.

Another difference is that a pack of files you can zip it making it lower.

Rory, that's not what i meant to say, but the option you mentioned is really nice and will be nice to see it on C2.

you can dump whatever info you have onto localstorage.

I don't know if it accepts images or not, but you could make a plugin to shove images there.

Worst comes to worst, you can encode your images in base64 (there are already plugins that do this) and store the resulting encoding onto localstorage, and then load them back in.

I don't think it will ever expire, unless the users explicitly clears it.

I don't see this working, how can i transform numbers into images?

I know that everything on the computer is only data, but how can i transform numbers on an image at runtime during a game? Oo

Edit: I said that because you can't put images on localstaroge.

You can put images in the local webstorage once the image is extracted to Base64 and you can then inject the Base64 code as image with the third-part behaviors Fimbul mentioned.

Anyway, I don't believe the downloaded/cached HTML5 files are flushed after two days.

As for the size of download, check image compression in C2 which is really of big help as well as the spritesheet features that also helps with the download size.

Once again, the game, the assets are only downloaded once. There is no "constant download everytime the game is accessed on the browser".

Thanks Kyatric, i will study that method, but do you recommend do something like that?

As i said, i play many flash games and they need to download again after some days.

For example i played a lot of Kingdoms CCG on Kongregate.com, i dowloaded it once and played, than next day i played it again and don't need to download it, but on the next next day the game was not on cash and i needed to download it again...

Let's suppose that on HTML5 the game is cashed forever, but even so if i update the game, adding new features(new cards for example), the whole game will need to be downloaded again, right?

If you're planning to make a CCG, I advise you to move the card images away from the client. Leave the UI, the card outlines, effects and that stuff in construct, but try to create an engine that is flexible enough to be able to download and interpret new card mechanics, display new card images, and make a cache system using localstorage.

This gets you two benefits: players don't have to download cards they don't use, and you can keep adding cards without forcing players to redownload the whole game.

If you do implement downloadable card mechanics (attributes, skills, effects, cost, whatever), make sure to build in some sort of cheat detection/prevention system - hell, you'll have to implement it either way.

I'm not exactly sure what "CCG" is, and I haven't played the game you refer to Metal_X.

The custom behaviors turn the image into a string, and allow to turn the string into an image from the client's side, so the image has only to be downloaded once from the internet, and then can be stored/processed on the client's side anyway.

Metal_X : I made the two plugin Kyatric kindly mentionned.

The base64 string thing is really old, as old as the web (older, in fact, since it was made to allow people exchange binary files over mail, which allowed only text at that time...).

The idea is very simple : every byte of a file on a computer is a number between 0 and 255. However, when you want to represent a character in a text files, there are less letters in the alphabet and the punctuation thatn 255. In fact, the characters are numbered from 33 to 126 ('M' is 77 for example).

So the base64 algorithm is simple : when you encounter a byte from the file, you represent it with one or more character (i.e. the byte '34' would be 'AG', the byte 201 would be '=/' and so on. It's not the real mapping, it's there to illustrate <img src="smileys/smiley2.gif" border="0" align="middle" />).

If you do that for the whole image file, you have the whole sequence of byte (each one ranging from 0 to 255) converted in a printable character sequence (each one covering 32 to 126 hence the 64 in base64).

You are going to object "Hey, if for each byte, you convert it to two or more letters, the representation in base64 is longer than in bytes !". That's true. base64 add around 33% overhead to the file size. That's the price to pay to be sure that the base64 string is always going to be readable, no matter what language the user is using on is machine (old 7 bits english ASCII, 8 bits european with '�','�','�', letters, complex tables with ideographic characters in Asia, etc...). At least you are sure that those 64 characters are the same everywhere.

Since it's so old, browser can naturally handle those base64 string. You can specify directly a base64 string as an image source, and the browser will display it happily (that's what my behaviors are doing).

Since it's a string, you can easily store it as text directly in localStorage, WebDB, send it over WebSocket and all...

With one of my behavior, you can extract the base64 string of an image. Since a few builds, you can enter that string directly as an URL in a Sprite, Ashley added the code to the Sprite object.

Everything you store in localStorage is going to be cached forever (at least for a long time, the decay is different for each browser, but at least 9999 days or the like <img src="smileys/smiley2.gif" border="0" align="middle" />). It's not true on mobile (oh, surprise !), because the system can decide that "the phone is full, I need to do some space !" (especially true on iOS).

If you want to lighten the download for your client, you can store the images in localStorage. You need however to have a system to check the image version when you are going to add new card to your game ("is the card I'm introducing newer thatn the one cached in localStorage ?")

Do not use base64 just to cache the game, it's completely unnecessary. Construct 2 games already use the HTML5 App Cache to permanently cache the entire game to disk for offline use. For more information see the tutorial Offline games in Construct 2.

The cache is permanent and never expires, so you will not ever need to re-download the game if it hasn't changed. Also since the game is saved to disk, it continues to work offline. Try visiting your game, playing it for a bit, unplugging your internet, then closing and reopening the browser to the game's URL. It will still load instantly. The tutorial also covers how updating works and how you can detect it with events.

Fimbul

Yes, a game that will be constantly updated needs a well made system to download only what is new.

Thanks for you advice.

Kyatric

CCG = Collectible card game

Pode

Thanks for the long explanation man, i tested the plugins and really appreciate the possibilities.

Ashley

Thanks for the advice Ashley, but even if the game is cached forever, with every small update it needs to download the whole game again, am i right?

If that's true, so the problem persist, i'm want to make a game that is constantly uptading, like every 3 days a new update.

For that problem i think that using Pode plugin to store data in localstorage is the best solution, or am i wrong?