User Tag List

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 13

Thread: Tips, Tricks, and Quirks I've Found using the HTML5 Runtime

  1. #1
    Clicker Fusion 2.5 DeveloperAndroid Export ModuleHTML5 Export ModuleiOS Export ModuleSWF Export Module
    DracisLooby's Avatar
    Join Date
    Jun 2008
    Location
    Washington, United States
    Posts
    169
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Post Tips, Tricks, and Quirks I've Found using the HTML5 Runtime

    Heya anyone interested!

    Just had the idea to share a few of my tips and tricks, and a few quirks I've found while using the HTML5 Runtime,
    I like to do Web Applications development on the side of my normal codework,
    And recently I have been looking more and more into how the HTML5 runtime runs,
    and the general coding concepts for JavaScript, and the nature of the web.

    I've decided to organize this in replies to my thread,
    So that its not all chunked into one post.
    Helps with viewing,
    And (lol hopeful) linking outside this thread.

    Feel free to Comment and Ask Questions, or have any Requests!

    Index:

    Basic JavaScript and CTF2.5:

    WebSockets (Using my OttWebSocks/WebSockets Object):
    -TODO: WebSockets Basic Info/Difference to 'normal' TCP sockets - Info
    -TODO: Basic WebSockets usage with a simple Node.js Server - Simple Difficulty
    -Possible TODO Advanced WebSockets Usage with a moderate/complex Node.js Server - Moderate Complexity
    -Possible TODO Using Node.js as a handler for WebSocket translation, and reverse proxing - High Complexity
    Really named Ben Otter, but oh well, eh?

  2. #2
    Clicker Fusion 2.5 DeveloperAndroid Export ModuleHTML5 Export ModuleiOS Export ModuleSWF Export Module
    DracisLooby's Avatar
    Join Date
    Jun 2008
    Location
    Washington, United States
    Posts
    169
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Post Running any JavaScript Without writing a function beforehand


    Running any JavaScript Without writing a function beforehand:

    There is definitely use cases where storing strings and functions in a plaintext JavaScript file might be less secure then you would like,
    Or just out of possibility for those without knowledge on writing JS,
    Or even just for convenience.

    On my first passover with both JavaScript, and the runtime, I noticed a distinct lack in the ability to run JS defined in the editor,
    You can call a function, provide it with arguments, and get data from it,
    but the requirement of writing a function in an outside file to be called irked me a bit, even if I had no actual use for it,


    So, in my first attempt, I read through the code of the HTML5 object, and saw the method it used for calling JS functions,
    and I modified it from calling functions via name from the window object using rect. brackets:
    Code:
    result = window['yourfunc'](params);
    to an eval() function call:
    Code:
    result = eval('yourfunc('+params+');');
    It worked 100% as intended, but not everyone wanted to go ahead and modify the source for the HTML5 runtime,
    especially if you don't know what your doing, or are unsure of what it might change.

    My second attempt was to write a new extension, which also worked 100% as intended,
    But then after looking at the code for efficiency refactoring,
    I noticed something that whooshed right over my head, and made me facepalm,

    The eval function can just be called right out of the HTML5 Objects 'Call Function' dialog, and skip both the modifications, and the extension middleman.
    Evel is a child object within the 'window' object, so it fits right in the standard, unmodified runtime.


    Use it like this:

    Code:
    HTML5 Object->JavaScript->Reset Parameter List; //Cleans up as a safety to just prevent errors, and unintended results
    
    HTML5 Object->JavaScript->Add String Parameter: 'whatever code to run'; 
    /*
    * Define your code as a string, you should be able to litterally run any code, even define new Function classes, or spin off new variables.
    * You can also just enter in a global or object variable name, and it returns its value.
    * Also, handy tip, double-double quotes is the quote escape in the Expression editor, 
    * Ex: "This is not quoted, but ""This Is"" ".
    */
    
    HTML5 Object->JavaScript->Call Function: "eval"; //Calls the eval, and runs the code.
    
    Special Conditions->Set Global String->A->HTML5 Object->JavaScript->Get String Result; //Store or use the result as normal, will return undefined if function is a VOID call with no return.
    That's about all there is for that, pretty useful if you're making a Game/App 100% in editor, but want to use not-yet-implemented features of JavaScript!
    Really named Ben Otter, but oh well, eh?

  3. #3
    Clicker Fusion 2.5 DeveloperAndroid Export ModuleHTML5 Export ModuleiOS Export ModuleSWF Export Module
    DracisLooby's Avatar
    Join Date
    Jun 2008
    Location
    Washington, United States
    Posts
    169
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Post Resizing the Application to fit the Browser window


    Resizing the Application to fit the Browser window:


    This ones just a bit more complex, and required me to actually add in a lines of code for resizing the Canvas Element correctly,
    As well as completely rewriting the default CSS style code.

    Just a note, something tells me this should already be available in the Runtime,
    Especially since it is fairly trivial to add in, and I even found a few lines that look like it had an attempted-at implementation,
    But I can't seem to get it to work from the editor,
    bug or feature drop maybe?
    (More likely I reinvented the wheel because I overlooked something simple,)

    None-the-less, here's how I achieve resizing the app and frame to the browser size without scaling or distorting the graphics;

    Firstly, the webpage needs to be completely blank for this to work properly, the only visible DOM element should be the Main MMFCanvas,
    We do this in a few steps,


    Firstly,
    We must clean out all the original styling for the page, do this by deleting everything in the first <style> tag in the html's code,
    (Note, to edit the HTML file, simply open it in Notepad, or any other text editor of your choice)
    So this:
    HTML Code:
    <!DOCTYPE html>
    
    <html lang="en">
    
    <head>
    <meta http-equiv="Content-Type" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, text/html; charset=UTF-8" />
    
    <style type="text/css">
    //A whole bunch of text in here -- STUFF TO EDIT OUT AND ERASE
    </style>
    
    //...Rest of file
    should look like this:
    HTML Code:
    <!DOCTYPE html>
    
    <html lang="en">
    
    <head>
    <meta http-equiv="Content-Type" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, text/html; charset=UTF-8" />
    
    <style type="text/css">
    </style>
    //Now nice and blank between the tags.
    
    //...Rest of file
    Secondly,
    We need to clean out the <body> tag of everything but the main canvas element,
    So find the <body> tag, and change it from:
    HTML Code:
    <body>
    <div id="wrapper">
    	<div id="border">
    		<div id="canvas">
    			<canvas id="MMFCanvas" width="1024" height="768">
    				<p>Your browser does not support Canvas.</p>
    			</canvas>   
    		</div>
    	</div>
    </div>  
    <p align="center">Clickteam Fusion Developer 2.5 HTML5 template. Please use final build for distribution.</p>
    
      <!-- Clickteam logo, encoded within the html code.-->  
      <div align="center"><a href="http://www.clickteam.com"><img src="HUGE line of text that is really a base64 encoded clickteam logo, also known as an imbedded binary file"></a> 
    </body>
    To:
    HTML Code:
    <body>
    
      <canvas id="MMFCanvas" width="1024" height="768">
        <p>Your browser does not support Canvas.</p>
      </canvas>   
    
    </body>
    Thirdly,
    Now that we have the HTML cleaned up a bit,
    go back the the <style> tag,
    and make it look like this:
    HTML Code:
    <style type="text/css">
                * {
                    padding: 0px;
                    margin: 0px;
                }
                html{
                    height: 100%;
                }
                canvas {
                    display: block;
                }
    </style>
    This makes it so the Canvas element fits very snugly in the frame, with little/no border or space around the edges,
    But only if the Canvas extends to EXACTLY the size of the browsers client area,
    This does not happen automatically, we need to add some JavaScript to help it out with page resizing,

    Fourthly
    We need to add a new function that resizes the canvas,
    And an 'Event' listener that fires on a page resize,
    So, add this at the bottom of your <head> tag in the HTML file:
    HTML Code:
    <script type='text/javascript'>
    //This is the function that resizes the MMFCanvas to the browsers client size
                function cOttResize() {
                    document.getElementById('MMFCanvas').width = window.innerWidth;
                    document.getElementById('MMFCanvas').height = window.innerHeight;
                };
    
    //This event listener fires when the page is resized,
                window.addEventListener("resize", function(e) {
                    cOttResize();
                });
    //And finally, this event listen fires when the page is loaded, so its initial size is correct
                window.addEventListener("load", function(e) {
                    cOttResize();
                });
    </script>
    DONE!
    That should be it for resizing the Canvas display at runtime,

    BUT WAIT, THERE ARE QUIRKS!

    Quirk One
    This method increases the rendering area of the frame, but not the frame size itself, and as far as I can tell,
    A bug is keeping the HTML5 runtime from being able to resize the frame at runtime,
    So if you use this method, best to mark everything visible to not be deleted when to far from frame,
    Otherwise it will get deleted a small distance outside of the frames 'actual' size.
    Plan accordingly.

    Quirk Two
    The background of the frame is only drawn to its 'actual' size, according to the runtime,
    It gives glitchy and garbage output whenever a sprite leaves the frames 'actual' size,

    I get around this by having a 'background' layer that has a 32x32 solid color object,
    That always positioned at 0,0 and gets scaled to x(Horizontal Client View Size/32.0),y(Vertical Client View Size/32).

    Just lock this layer, and let the object clear the background, works very well for me on my experiments.

    That's about it for resizing, I might write an extension for this at some point, to make it easier for everyone. We'll see.
    Really named Ben Otter, but oh well, eh?

  4. #4
    Clicker Multimedia Fusion 2 DeveloperiOS Export ModuleSWF Export Module
    Francois's Avatar
    Join Date
    Jul 2006
    Location
    Montpellier, France
    Posts
    6,920
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    * Good idea for the eval function! Thanks.
    * Resizing : why bother doing all this, whereas you only have to check the "Resize display to fill window size" in the Display tab of the application properties, and it does exactly the same... The game takes the whole browser window, no clickteam logo or anything. More important, by check the "Keep screen ratio" property in the same page, you can make sure that the width/height ratio of your game is preserved (by adding black borders around it).

  5. #5
    Clicker Fusion 2.5 DeveloperAndroid Export ModuleHTML5 Export ModuleiOS Export ModuleSWF Export Module
    DracisLooby's Avatar
    Join Date
    Jun 2008
    Location
    Washington, United States
    Posts
    169
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Np! Thanks for your hard work!

    As far as the reason for resizing, I had originaly had it titled as "Resizing the Application to Fit the Browser Window Without Graphics Scaling or Distortion" but it didn't fit in the post reply title,

    My method keeps the screen elements at their original size, and allows for more traditional web application development,
    Where graphics generally aren't scaled, but UI elements are to fit screen size.

    Its not so much for games, its more based on how general windowing UI is handled.

    EDIT: Here are the example Differences between My Method, and The CTF2.5 HTML5 Runtime's Methods:

    My Method
    Source MFA

    HTML5 Resize Display To Fill Window Method
    Source MFA

    HTML5 Resize Display To Fill Window with 'Keep Ratio' On Method
    Source MFA

    To get the full effect, resize your browser window with each, and see what the differences are.
    Notice that my method does not stretch or scale any graphics (At least not where unintended, in the app I have it resize and reposition UI accordingly),
    To me, my method is much more Ideal for creating web applications, instead of web games. Just a difference in approach, really.

    Aslo, feel free to look and use the source of each, the mfa's are linked.
    Really named Ben Otter, but oh well, eh?

  6. #6
    Clicker Fusion 2.5 MacFusion 2.5 DeveloperFusion 2.5 DeveloperAndroid Export ModuleHTML5 Export ModuleiOS Export ModuleUniversal Windows Platform Export ModuleSWF Export ModuleMac Export ModuleInstall Creator Pro
    iOSC's Avatar
    Join Date
    Mar 2012
    Location
    Toronto, Canada
    Posts
    405
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I did a quick extension few weeks ago in order to eval javascript code here

  7. #7
    Clicker Fusion 2.5 DeveloperAndroid Export ModuleHTML5 Export ModuleiOS Export ModuleSWF Export ModuleInstall Creator ProUnicode Add-on
    Fusion 2.5 (Steam)Fusion 2.5 Developer (Steam)Android Export Module (Steam)HTML5 Export Module (Steam)iOS Export Module (Steam)Universal Windows Platform Export Module (Steam)
    Hristos's Avatar
    Join Date
    Jul 2006
    Location
    Makrygialos, Greece
    Posts
    156
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up Great work!

    Thank you DracisLooby !!
    I tried your tips and the result of my experiment is here:
    http://kidmedia.eu/images/Chris/Scr/Tst_again.html

    I made an application 32x32 (maybe it could be 1x1???), I used an active 1x1 (only!) to clear the background and I am checking the client area width every second so that the objects moving will not be "lost" somewhere (I should also check the client area height ...). It is easy to resize the objects too, depending on the screen resolution.
    All the action takes place out of the application!!!
    There are many things to test yet but this approach gives a whole new perspective ...
    One can make "alive" interactive web pages with incredible animations which can adjust depending on the screen resolution!

  8. #8
    Clicker Fusion 2.5 DeveloperAndroid Export ModuleHTML5 Export ModuleSWF Export Module

    Join Date
    May 2012
    Location
    NSW, Australia
    Posts
    405
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    AWESOME Dracis! Resizing technique is great, seems like the best way to accomplish fullscreen HTML without the distortion.

  9. #9
    Clicker Fusion 2.5 DeveloperAndroid Export ModuleHTML5 Export ModuleiOS Export ModuleSWF Export Module
    DracisLooby's Avatar
    Join Date
    Jun 2008
    Location
    Washington, United States
    Posts
    169
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey, thanks for all the comments, I'm just glad it's useful to people!

    Hopefully this week I can work on my JS Event Extension, and clean up how things are resized, along with other useful functions.

    iOSC*: Thanks for the extension! I guess the difference is the eval method through the HTML5 object can be done in vanilla, but writing a actual extension for it could probably produce more reliable results!
    Really named Ben Otter, but oh well, eh?

  10. #10
    Clicker Fusion 2.5 DeveloperAndroid Export ModuleHTML5 Export ModuleiOS Export ModuleUniversal Windows Platform Export Module
    Retrobolt's Avatar
    Join Date
    Mar 2016
    Posts
    395
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    @DracisLooby

    Is there a way to rotate the Html5 game when on mobile?

    I want to have a message show up when the phone is rotated the wrong way telling the player to rotate the phone the right way.

Page 1 of 2 1 2 LastLast

Similar Threads

  1. HTML5 runtime
    By Evilized79 in forum Multimedia Fusion 2 - Technical Support
    Replies: 12
    Last Post: 10th May 2014, 02:19 PM
  2. What I have found with HTML5 (client and server)
    By Kimera in forum HTML5 Export Module 2.5
    Replies: 13
    Last Post: 14th February 2014, 03:28 PM
  3. Tips and tricks on submitting your app to AppStore
    By mobo in forum iOS Export Module Version 2.0
    Replies: 10
    Last Post: 15th May 2012, 11:14 PM
  4. iOS Tips & Tricks
    By StingRay in forum iOS Export Module Version 2.0
    Replies: 0
    Last Post: 14th October 2011, 08:02 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •