SWF Alternative?

[WombatTurkey]

I'm trying to find a way to pack all my game assets into one file. I'm using swf in my topic title as just an example of how flash games are compiled.

Is there anything similar to this or coming out soon / in development? Think of a zip file that you can load, and the browser can unpack all of its contents and load in the assets dynamically and locally without having to use http requests. I am looking for something like that. I know, we can just use electron (atom) and have player's install a game client instead, but I'm looking for something similar to how flash compiled their games.  

 

The closest I found was using the pako.js library which let's you read zipped files.  I can convert all my images to base 64, and compress all my JS files, game assets, game data, etc into one big file that get's read when uploaded. Problem is, then after you unpack that, you cannot take advantage of css's caching features from the base 64 encoding images, etc, etc.

 

So I'm looking for something similar to how SWF was used. Just load that one file and boom, you got everything all in there and ready to roll with 1 HTTP request.

 

[BobF]

Sounds like a job for webpack.

[d13]

2 hours ago, BobF said:

Sounds like a job for webpack.

Does webpack output a single dependency-free compressed file? From the Docs it looks like just another grunt/gulp dependency manager. 

[BobF]

I haven't used webpack yet (it's on my "to do" list), but my understanding is that it both bundles and manages dependencies. I believe it can also bundle things like image assests as data URLs (may require a webpack loader plugin). For large apps I think it normally bundles things into chunks in order to avoid the ineffiencies created by forcing the user to download the entire app as a single file. But, AFAIK there's nothing preventing you from bundling into a single file.

[mattstyles]

Webpack is just a bundler, identical in scope to grunt/gulp/browserify etc etc etc. It doesn't really deal with loading.

Your problem is that you are assuming that you can open and run a swf without any additional software, something (i.e. flash) unpacks that swf and then runs the app (as I understand, and I am not and never have been a flash developer).

To translate that to the web, you just build your project as you currently do, make sure all your assets are relative to the your html and ensure no assets come from outside (i.e. from the web), zip that project bundle, then users can unzip and open the index.html, most platforms will fire that into the system browser.

If you want to create a custom zip format that can be run then you need something that can understand how to run that—Electron and NW etc go one step further and bundle everything needed to run that on different platforms, but, you may not need that if your app is purely a front-end thing i.e. you just need a browser to run it.

Hang on, I may have read your question wrongly, you want just one HTTP request? Or you want users to open just one file? Similar to opening any 'native' executable?

 

[BobF]

Quote

Hang on, I may have read your question wrongly, you want just one HTTP request?

"1 HTTP request" seems to imply this is a web app, not a desktop app, at least that's how I read it. The HTML5 equivalent of a web SWF file would be to bundle all code and assets into a single JS file. Actually, any bundler will do this for you once you've converted your media assets to data URIs. However, I think the disadvantages of delivering a web app as a single JS file would outweigh any advantages in most cases.

[chg]

"1 HTTP request" isn't necessary one file either. SPDY / HTTP 2.0 support server push, which was designed to let you send files the client hasn't asked for yet with the response (sorry, I've no idea if and how supporting webservers let you use this though atm)

If the intention is to make the game easier to copy, could you maybe include a link in the game to a zipped copy?

I think this would be a bit hard to answer without understand the problem/s you want to solve by having a single file.

[semk]

I use the alpha 0.7 build of Famous JS and they use this utility called Uglifyify (https://github.com/hughsk/uglifyify)  which takes the entire framework and your src files and puts them into one JS called bundle.js, could that be helpful? 

[WombatTurkey]

18 hours ago, mattstyles said:

Webpack is just a bundler, identical in scope to grunt/gulp/browserify etc etc etc. It doesn't really deal with loading.

Your problem is that you are assuming that you can open and run a swf without any additional software, something (i.e. flash) unpacks that swf and then runs the app (as I understand, and I am not and never have been a flash developer).

To translate that to the web, you just build your project as you currently do, make sure all your assets are relative to the your html and ensure no assets come from outside (i.e. from the web), zip that project bundle, then users can unzip and open the index.html, most platforms will fire that into the system browser.

If you want to create a custom zip format that can be run then you need something that can understand how to run that—Electron and NW etc go one step further and bundle everything needed to run that on different platforms, but, you may not need that if your app is purely a front-end thing i.e. you just need a browser to run it.

Hang on, I may have read your question wrongly, you want just one HTTP request? Or you want users to open just one file? Similar to opening any 'native' executable?

 

 

Hey,

Yeah, basically I want what swf does (by unpacking as you said) but w/o using .swf files.  And by one HTTP request you're right, I just want the user to download 1 file and it unpacks everything. I guess I will try webpack.

 

Honestly, I guess electron or nw is the best solution instead of converting all assets in data URI's, then what about sound files? Yea I think it's not looking good for me.

 

I think my request is something browser's might have to implement natively..which will probably never happen  . I'll take a look into what chg has said though too.

[mattstyles]

Yeah, so, webpack isnt going to do it. It probably has plugins (as do any of the other build systems you might know or use) that will do the image encoding but I dont know what happens with sound files. SVG is slightly easier, in that it is just a string of text representing your shapes, but that might not be a solution for you.

If you want a distributable that requires 0 effort from the user then you'll have to package via Electron/NW/etc. Electron has a package format, called ASAR, its just a zip, you then bundle it with the Electron runtime (I'm not sure thats the best word for it) and your users can simply download and go. This does mean you have to build on your target architecture i.e. I dont think Linux can do Electron/NW builds for Windows (edit actually you can but its a pain, although possible).

I think all platforms will, by default, fire an html file into the system browser so if you didnt mind users downloading and then launching from an html file then you dont need the one large file, you can have as many as you like but are restricted to loading from the file protocol. You could bundle a simple server with your package, but that would then involve users downloading dependencies to run that server on their machine, this can be automated but it would be a major hurdle for users so almost certainly not what you want.

Oh, with Electron or NW you dont need one big file, infact, the concatenation of (for example) JS files into one file, which is common, is purely to restrict http overhead, as chg said, this constraint is going away, and as Electron/NW loads files locally from disk you dont require a concatenation (or even obfuscation), have as many files as you like. The only place where concatenation makes sense (away from restricting http overhead) is if compression gives you serious advantages using one large file i.e. gzipping usually works better on one large file than 20 smaller ones for obvious reasons.

[BobF]

20 hours ago, chg said:

SPDY / HTTP 2.0 support server push

SPDY is nice, but it requires an SSL connection.

 

16 hours ago, WombatTurkey said:

I just want the user to download 1 file and it unpacks everything. I guess I will try webpack.

Webpack will do the job. It bundles JS out of the box, and there's already an image loader for it. But I don't see an audio loader so you'll probably have to create that yourself. The loader would simply convert the audio binary to a data URI which should be trivial since it's basically just a base64 encoding.

 

Quote

I guess electron or nw is the best solution instead of converting all assets in data URI's

Electron and NW are for creating JS based desktop progams. If a desktop program is what you want to offer then that's the way to go. If you want to offer a web based app and just want to combine the whole app into a single JS file then use webpack, or your preferred bundler.

 

Quote

I think my request is something browser's might have to implement natively..which will probably never happen  .

It's already available! You just need to convert your media assets to data URIs and bundle it all up with your code into a JS file. Browsers already handle image data URIs natively. I took a quick look and I see that Howler appears to support audio data URIs, so apparently that capability is already available as well. Here's a little more info on creating audio data URIs.

 

[WombatTurkey]

7 hours ago, BobF said:

SPDY is nice, but it requires an SSL connection.

 

Webpack will do the job. It bundles JS out of the box, and there's already an image loader for it. But I don't see an audio loader so you'll probably have to create that yourself. The loader would simply convert the audio binary to a data URI which should be trivial since it's basically just a base64 encoding.

 

Electron and NW are for creating JS based desktop progams. If a desktop program is what you want to offer then that's the way to go. If you want to offer a web based app and just want to combine the whole app into a single JS file then use webpack, or your preferred bundler.

 

It's already available! You just need to convert your media assets to data URIs and bundle it all up with your code into a JS file. Browsers already handle image data URIs natively. I took a quick look and I see that Howler appears to support audio data URIs, so apparently that capability is already available as well. Here's a little more info on creating audio data URIs.

 

Lol wow, never knew audio data URI's were a thing, amazing. Thanks for your post! I saw drastic improvement in FPS in my game using electron last night So I'm inclined to just screw the 'web browser' title to my game

[lukaMis]

If you can get your game down to 5 requests (html&css, js, image atlas, image atlas json, sound sprite) that would be great achievement imho. We usually have way more....