HTML 5 Discussion

The_Gamesalad_Guru

I thought I'd start a thread so we can see what's going on with HTML 5. One thing I'd like to see is the ability to specify the size of the frame.

jamie_c

One thing I'd like to see is the ability to specify the size of the frame.

Agreed, I just tried this today and it does not seem possible right now.

The_Gamesalad_Guru

Just realized there are instructions in the Indexd file.

INTRODUCTION:
This HTML document and related files are a working example of how to embed a
GameSalad HTML5 game into a website. In all, the necessary files include:

1. A snippet of HTML elements. (see below: "gse-player" element)
2. Some CSS declarations. (see file: gse-style.css)
3. The JavaScript engine file. (see below: script tags)
4. Some ad-hoc JavaScript code to configure and initialize the game. (see below:
   script tags)
5. The directory of game data and assets.

HOW TO:
Very broadly, there are two common scenarios to embed your game in a webpage.
Your choice will depend on the layout and requirements of your site.

Scenario 1: iframe
Create a separate dedicated page based on this source that only runs the game.
Then embed that page into another page's layout using an iframe tag. This setup
is the simplest.

Scenario 2: inline
Integrate all the necessary elements into one HTML page by copying and tailoring
pieces from of this source. This setup may save some extra web requests, as well
as allowing more complicated layering of the game and other HTML elements.

CSS STYLE:
The file gse-style.css contains the essential rules required for the engine to
display properly. However, there are some customizable considerations:

What appears before the game is loaded? The game will not draw anything until
the first scene begins. Until then, you can show something else by layering
elements underneath or on top of the player.

What appears behind the game as it plays? If the game doesn't scale to fit the
player area or it uses letterboxing, then there will be empty space around the
player. You can control what appears in that area either by layering elements
underneath the player or by setting the background-color or background-image.

What appears during loading? This document implements a very simple loading
animation. It can be customized by replacing the image and modifying the CSS
styling. Or you can modify the JavaScript code to make a different experience.

RENDER FRAME and VIEWPORT:
The render frame is the area of the screen that contains the game. In practice,
the render frame is an HTML div that we will call "gse-player".
The viewport is the area inside the render frame that scales and clips the game's
drawing functions. By customizing the viewport, we can do things like letterbox
the game within the render frame to better fit different-sized screens.

Setting up the viewport is achieved with a combination of CSS and JavaScript.
The size of the gse-player element should be set with CSS.
The other viewport options are configured with the engine.setOptions() function
that you will call in the gse.ready() callback.

Here are some common scenarios:

1. You want to display the game at the same size as it was designed in Creator.

• Set the CSS width and height of the gse-player element to 0.
• viewport-reference = game
• viewport-fit = none

2. You want the game to display at a fixed size, but possible larger or smaller
   than the original size from Creator. You will ask the engine to zoom, pad, or
   crop the game best fit in the desired area.
   Letterbox is the easiest approach, but some may prefer overscan if the game
   was designed with it in mind.

• Set the CSS width and height of the gse-player element to the fixed size.
• If letterboxing, set a background-image or background-color (e.g. black)
• viewport-reference = frame
• viewport-fit = letterbox or overscan (or center or fill, but less common)

3. You want the game to fill the entire browser window (or parent iframe).
   You may choose letterbox or overscan to fit browsers and screens of different
   sizes.

• Set the CSS width and height of the gse-player element to 0.
• viewport-reference = window
• viewport-fit = letterbox or overscan
• Use a window resize event handler to call engine.relayout() so that the engine
  can resize itself when the window resizes.

LOADING SCRIPT:
Here we define a callback function and pass it as an argument to gse.ready().
After the engine has loaded and initialized, it will invoke our callback. At a
minimum, we must tell the engine where to draw [with engine.setRenderFrame()]
and where to find the game assets [with engine.play()].

We can also tinker with some engine options and hook into game events via the
delegate pattern.

We must call gse.ready() after the engine file has loaded. There are a few ways
to accomplish this. See the section below for more detail on that.

-->

(function(global) { // This function is called after the engine script file has loaded. // At that point, the gse.ready function has be defined and we can call it. global.onEngineLoad = function() { // gse.ready() is a global function defined by the engine JavaScript // file. It is the only global function of the API and the only way to // initially interact with the game. The remainder of the API is object- // oriented. // We define a ready callback function and pass it to gse.ready(). // Later, that callback will be invoked when the engine is ready. // Via the callback's arguments, the GameSalad code passes us back an // object called "engine" which implements several useful API functions. gse.ready(function(engine) { // These bits of code are optional. This demonstration shows how to // use a delegate to control a loading animation that spins in // between scene loads. // A delegate is a JavaScript object that receives callback from the // engine on particular events. // To customize this animation, you can replace the gse-loading.png // image with another, and you can tailor the CSS styling and // animation to match (say, make it bounce instead of spin). // Or, you can replace this entirely with your own JavaScript code. var loadingElement = document.getElementById('gse-loading'); var playerDelegate = { onLoadingBegin: function() { engine.showOverlay(); loadingElement.style.visibility = 'visible'; }, onLoadingEnd: function() { loadingElement.style.visibility = 'hidden'; engine.hideOverlay(); }, onWindowResize: function() { engine.relayout(); } }; engine.appendDelegate(playerDelegate); window.addEventListener('resize', playerDelegate.onWindowResize, false); // These lines initialize and configure the engine. // The choices for engine.setOptions are: // viewport-reference = game | frame | window // viewport-fit = none | center | fill | letterbox | overscan engine.setRenderFrame('gse-player'); engine.setOptions({ 'viewport-reference': 'window', 'viewport-fit': 'letterbox' }); engine.loadOptionsFromURL(); // While the engine is ready, the game assets have not been loaded // yet. The final step is to begin loading the game. // We have a few options: // 1. Begin loading game assets immediately, from the default game // location, and then start the first scene soon as it is complete. // This is the simplest option with just one line. engine.play(); // 2. Load a game from a location other than the default. Use this // if you have renamed the game directory, or have organized the // files on the webserver different from the default. //engine.play('path/to/game/directory'); // 3. Begin loading the game in the background, but do not // immediately start the first scene. // Instead, we will delay starting the game until some user event, // such as waiting for them to click a button. This is an open ended // choice, so implementations will vary. // A very simple example might look like this below. // Notice we pass a path to the load() function and then later call // the play() function without any arguments. You just need a // reference to the engine object, either in this closure scope or // with a global variable. // If you choose this route, you might want to tinker with the // loading animation code so that you get the right visual experience. // begin loading... //engine.load('path/to/game/directory'); // register a click listener to start the game //document.getElementById('gse-player').addEventListener('click', function() { // engine.play(); //}); // 4. Neither load nor play the game immediately. Like the previous // option, this can be very open ended. For example, maybe you want // to play a video clip first, and then load the game. // You can defer calling engine.load() and engine.play() in response // to whatever JavaScript events suits your design. }); }; }(window));

Armelline

Everything I'm working on at the moment is really table heavy and there are too many table bugs with HTML5 for me to really be able to test anything

The_Gamesalad_Guru

Now I got it to work better by using the sample-frame file instead of the index file!

Still can't publish my larger projects.

jamie_c

@Lost_Oasis_Games, nice. I hadn't noticed the instructions.

GeorgeGS

Please make sure there are bugs in the database for any issues you're having. We're interested in fixing them, but need to be able to track and prioritize them to do it.

Armelline

@GeorgeGS said:
Please make sure there are bugs in the database for any issues you're having. We're interested in fixing them, but need to be able to track and prioritize them to do it.

I've added some bugs previously regarding HTML5 and tables in general, and expanded on them in comments to @BlackCloakGS, @RhiannonSalad and @adent42. I'm super-swamped right now so have been slacking on my bug reports a bit, but please drop me a message if any more details are needed as I don't think I added all my extra comments to the actual bug reports.

Braydon_SFX

I was hoping to publish Frantic Five but I think the heavy-table use causes bugs. Hoping GS can fix this?

Hopscotch

Just reminder to all that with HTML5 your art and sound assets are not protected.

Hopscotch

@Lost_Oasis_Games said:
...the ability to specify the size of the frame.

Just tweaking the width and height in sample-frame.html does the trick.

Hopscotch

Sound and Music works great in Safari, Edge, Chrome, Firefox, Opera!

Only have an old Explorer, no sound, no surprise.

GeorgeGS

@Braydon_SFX said:
I was hoping to publish Frantic Five but I think the heavy-table use causes bugs. Hoping GS can fix this?

We'll need a bug, a project, and a description of the specific things that aren't working to look at things like this. The simpler the project the better if you're able to narrow it down.

Armelline

@Braydon_SFX said:
I was hoping to publish Frantic Five but I think the heavy-table use causes bugs. Hoping GS can fix this?

The following things are affected, last time I checked:

• tableSearch doesn't function properly with notexact, notbeginsWith, endsWith, notendsWith, notcontains
• Booleans must be monitored using numeric expression, text expression doesn't work
• The following functions do not function properly: tableColCount, tableRowNumber and tableColNumber
• There's a problem comparing table cells that I couldn't pin down exactly but provided a pretty simple project to demonstrate when I submitted a bug

Any or all may have been fixed by now, and all have been reported to GS so this is for Braydon rather than to notify the GS team.

Franto

@Hopscotch said:
Just reminder to all that with HTML5 your art and sound assets are not protected.

I heard they use "wrappers" for those that develop html5 games, in order to protect or obfuscate their assets and code, but I'm not sure about the details. Maybe GS will give the option for obfuscation unless the html5 export can be wrapped by the programs used for obfuscation?

The_Gamesalad_Guru

@ardent243 still unable to publish with lots of sound files? Any suggestions?

UtopianGames

HTML 5 is unusable for most and not a valid publishing option i think they should remove it until its fixed to save the hassle….user buys GS for HTML 5 option, user discovers it has more bugs than an Indiana Jones film, user complains asks for refund and spreads muck around about GS.

MentalDonkeyGames

@UtopianGames the HTML 5 export is currently available only for testing purposes, and it's only available to people who request it from GS staff. It's not public yet.

Lovejoy

html5 publishing + Cordova/Phonegap, anyone?

The_Gamesalad_Guru

Still having issues publishing games with lots of sound files. Bug 1409

Lovejoy

@Lost_Oasis_Games said:
Still having issues publishing games with lots of sound files.

I ran into the same problem for some apps, seems like some sound files just seem to not want to work. I removed the sound file in question and tried again, it then made it through. I have to now try replacing it and see if it makes it.

jonmulcahy

@Lovejoy said:
html5 publishing + Cordova/Phonegap, anyone?

jonmulcahy

@lovejoy how did you determin what the bad soundfile was? Mine just gives me a generic message.

Some of the sound files in your project are corrupt or invalid.
The following images need to be repaired or replaced: ''.

Lovejoy

@jonmulcahy said:
lovejoy how did you determin what the bad soundfile was? Mine just gives me a generic message.

The following images need to be repaired or replaced: ''.

I tried publishing the game to gs arcade and a message popped up with the corrupt sound file name.