HTML5 for iOS, Android

Monkey Forums/Monkey Programming/HTML5 for iOS, Android

Alex	(Posted 2014) [#1]

Hello everyone!
I would like to share with you this site.
http://www.softgames.de/
By making html5 games you can be paid.

I think it would be interesting for many people on monkey-x community. As many of us has it's own games made for ios and android. And everyone of us tasted it on html5 first. So, everyone definitely has "free" html5 code and this could be easy money :)

There are some problems though.
These games have some requirements to be submitted to this site.

(from the SoftGames):
-the game must work perfectly centered on different browsers of Android, iOS, Windows Phone 8 and Desktop operating systems
-work in fullscreen (no URL bar visible) and automatically scales to any high/low resolutions (no black borders visible )
-handle device rotation automatically (showing “please rotate screen” information)
-has the text separated from images (check out Google Web Fonts!)

Here I would like to gather all of us to solve those problems. And help each other to create a couple of modules/assets.

I think fullscreen issue is less important as this is just my lack of html skills made me think that this is the problem. However, It would be great if someone will share a way to do that on mobile.

Alex	(Posted 2014) [#2]

Second, Google Fonts.
Because monkey-x html5 is a little bit slow on mobile, we have to use a faster way to draw your text.

The integration is simple!
You just have to add in your <head> TAG the line:

<link href="http://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet" type="text/css">

(replace with your font)

However, I did not get how to draw text properly.
I use this function to draw text:

Code:

DrawJsFont( theText, tX, tY )

Wrapper:

Private

Import "native/html5.js"

Extern
	
Function DrawJsFont: Void(theText:String, tX:Int, tY:Int)

Native (html5.js):

DrawJsFont = function(theText, tX, tY) {
    
    var canvas=document.getElementById( 'GameCanvas' );
    var context=canvas.getContext( '2d' );
    
	
    context.font = '40pt Inconsolata';
    context.fillText(theText, tX, tY);
    
}

If you try to use it in your game you'll see, that every call of that function will draw the text in its own canvas.
So, position of tX and tY is not relative to screen. (Try to set tX = 0 and tY = 0, and it will draw the text in the left upper corner of each of your previously drawn image.)

Please, help me to integrate it right.
Thank you!