Jump to content


Photo

Html Extension [Broken Links]


  • This topic is locked This topic is locked
48 replies to this topic

#1 Schalk

Schalk

    GMC Member

  • GMC Member
  • 487 posts
  • Version:GM:HTML5

Posted 18 October 2011 - 09:43 AM

icon_trans.pngHTML Extension

This extension package provides HTML functionality for Game Maker HTML5 games. That means you can add snippets of HTML code where you want it. The extension also provides functionality to connect the HTML elements to your code, for example when you press a button made in HTML it can make your character jump.

Functions
canvas_html_add(x,y,html) - Creates a new html element and positions it accordingly. The function returns an integer as an id that must be used in all other functions to access the particular html element.
canvas_html_remove(id) - Destroys the html element, do this when you are done using the element.
canvas_html_hide(id) - Makes the html element invisible.
canvas_html_show(id) - Makes the html element visible.
canvas_html_get_html(id) - Returns the html for the html element.
canvas_html_set_html(id,html) - Sets the html for the html element.
canvas_html_get_x(id) - Returns the x-coordinate for the html element.
canvas_html_get_y(id) - Returns the y-coordinate for the html element.
canvas_html_set_x(id,x) - Sets the x-coordinate for the html element.
canvas_html_set_y(id,y) - Sets the y-coordinate for the html element.
canvas_html_add_event() - Returns the id of the event to be used for other functions. This function must be called first before being able to use events.
canvas_html_callback(id) - This function will return true if the event with the given id has been triggered. If it hasn't been trigger it will return false. This will usually go in the step event of an object.
canvas_html_fire_event(id) - This function is a bit tricky. This "fires" an event with the given id. You would expect this to be in your html code, however can also be used in your game maker project.

Live Example
http://syntaxgames.com/gamemaker/html/

Links
http://syntaxgames.c...L_Extension.zip (direct)
http://www.crocko.co...L_Extension.zip (mirror)

Online Documentation
http://syntaxgames.c...umentation.html

Compatibility
I haven't tested compatability. Please feel free to post what browsers this work/don't work on.

License
Feel free to use and abuse as you wish. Credit appreciated though.

EDIT: Added mirror.


Edited by chance, 12 April 2014 - 11:01 AM.

  • 2

#2 OMGCarlos

OMGCarlos

    GMC Member

  • GMC Member
  • 329 posts
  • Version:GM:HTML5

Posted 18 October 2011 - 04:24 PM

I couldn't for the life of me figure this out, awesome work!
  • 0

#3 Psalms23

Psalms23

    GMC Member

  • New Member
  • 163 posts

Posted 24 October 2011 - 06:59 AM

Could this be used to just slam a youtube video right on top of your game lol?
  • 0

#4 Schalk

Schalk

    GMC Member

  • GMC Member
  • 487 posts
  • Version:GM:HTML5

Posted 24 October 2011 - 07:43 AM

Yes. Don't see why not anyway.

The below code will embed http://www.youtube.c...h?v=SbDx3M2YnKc on to your canvas and size it to fit in the room.
canvas_html_add(0,0,'<iframe width="' + string(room_width) + '" height="' + string(room_height) + '" src="http://www.youtube.com/embed/SbDx3M2YnKc" frameborder="0" allowfullscreen></iframe>');

Edited by Schalk, 24 October 2011 - 07:48 AM.

  • 0

#5 xXNeoREXx

xXNeoREXx

    GMC Member

  • GMC Member
  • 41 posts
  • Version:GM8.1

Posted 10 November 2011 - 01:04 PM

Amazing Extension!
although its really hard to understand...
(Even with the given example)
  • 0

#6 epilobello

epilobello

    GMC Member

  • GMC Member
  • 166 posts
  • Version:GM:Studio

Posted 13 November 2011 - 05:12 AM

Yes. Don't see why not anyway.

The below code will embed http://www.youtube.c...h?v=SbDx3M2YnKc on to your canvas and size it to fit in the room.

canvas_html_add(0,0,'<iframe width="' + string(room_width) + '" height="' + string(room_height) + '" src="http://www.youtube.com/embed/SbDx3M2YnKc" frameborder="0" allowfullscreen></iframe>');


if i put
canvas_html_add(0,0,'<video width="' + string(room_width) + '" height="' + string(room_height) + 'controls="controls">' + 
'<source src="djp1.mp4" type="video/mp4"/> Your browser does not support the video tag.</video>');

then do a Create Application. Should I put the video in the html5game folder?

I made this index.html and put the djp1.mp4 video in the same place to test
<!DOCTYPE HTML>
 <html>
 <body>

 <video width="320" height="240" controls="controls">
   <source src="djp1.mp4" type="video/mp4" />
   Your browser does not support the video tag.
 </video>

 </body>
 </html>

and it works.

Edited by epilobello, 13 November 2011 - 05:26 AM.

  • 0

#7 epilobello

epilobello

    GMC Member

  • GMC Member
  • 166 posts
  • Version:GM:Studio

Posted 13 November 2011 - 06:16 PM

<!DOCTYPE HTML>
 <html>
 <body>

 <video width="320" height="240" controls="controls">
   <source src="djp1.mp4" type="video/mp4" />
   Your browser does not support the video tag.
 </video>

 </body>
 </html>

and it works.


This morning I tried kicking this around a few times. Not really sure what I'm doing.
<body>
            <!-- Create the canvas element the game draws to -->
            <canvas id="canvas" width="1000" height="560">
               <p>Your browser doesn't support HTML5 canvas.</p>
            </canvas>

            <video controls="controls" autoplay="autoplay">
            <source src="djvideos/djp1.mp4" type="video/mp4" />
            Your browser does not support the video tag.
            </video> 

        <!-- Run the game code -->
        <script type="text/javascript" src="html5game/test3.js?KEIZB=895945803"></script>
    </body>

Inserting <video> thusly, played in a smaller canvas below the game canvas which was blank. The game never launched. On the otherhand, launching the video from within test3 shows a blank canvas with no video nor game. Obviously there is much for me to learn about multi-canvas stuff. I also need to figure out how to sequence/branch a series of videos and game/interactive elements.

If I can get the video to play within GM HTML5 and trigger an event when it concludes, then I can go to/from room to room playing videos and the games (exercises) related to the lecture the student just watched. I also need to pass right/wrong choices made in the games for grading and/or review of previous videos.

It was so much more expedient when all we had were chalkboards, textbooks, pencils, paper and the swat of a switch.

By the way, there would be different lecturers presenting the same material. The student can choose which lecturer to watch based on their style.

Any and all suggestions are welcome!!
  • -1

#8 Psalms23

Psalms23

    GMC Member

  • New Member
  • 163 posts

Posted 24 November 2011 - 06:45 PM

Works great in firefox.. I tried to put an adsense add in the game, but that didn't work. Perhaps because it's javascript, not html?

Edited by Psalms23, 24 November 2011 - 06:46 PM.

  • 0

#9 beatson

beatson

    GMC Member

  • GMC Member
  • 319 posts
  • Version:GM8

Posted 05 January 2012 - 07:15 PM

Works great in firefox.. I tried to put an adsense add in the game, but that didn't work. Perhaps because it's javascript, not html?

In that case, put the ad inside an iframe and display that? Could work.

Not sure if its against Googles TOS to put ads in-game though.. You'll have to check...

edit: Great extension by the way!

Edited by beatson, 05 January 2012 - 07:16 PM.

  • 0

#10 Desert Dog

Desert Dog

    GMC Member

  • GMC Elder
  • 6409 posts
  • Version:Unknown

Posted 06 January 2012 - 04:46 AM

Oh, I haven't posted here. I had a mess around with this before, it's a great extension. Cheers!
  • 0

#11 njp

njp

    Panda

  • GMC Member
  • 2342 posts
  • Version:GM8

Posted 06 January 2012 - 04:56 AM

thank you thank you! life saver! :) im completely serious!
  • 0

#12 rickster

rickster

    GMC Member

  • GMC Member
  • 29 posts

Posted 13 January 2012 - 10:05 PM

When I embed an iframe with a site in it, all other stuff in my game related to the mouse stops. I have a back button (outside of the iframe), but it does not work. Out of curiosity, I made the game draw the mouse_x and mouse_y to the screen, and found out that when displaying my iframe, they were not updated. I do not know if this happens with any HTML, but it is annoying and makes this useless for me.

Is there any way to make the input for the game still work while HTML content is displayed?
  • 0

#13 Samuel Venable

Samuel Venable

    GMC Member

  • Banned Users
  • 632 posts
  • Version:GM:Studio

Posted 14 January 2012 - 01:12 AM

This is very useful indeed and it provided just what I was looking for, a way to embed applets, activex, and other plugins into my game. :D exellent work.

#14 Desert Dog

Desert Dog

    GMC Member

  • GMC Elder
  • 6409 posts
  • Version:Unknown

Posted 16 January 2012 - 03:35 AM

@Schalk: How did you get input boxes working again? Turns out my virtual keyboard isn't a good enough solution, so I'm going to start trying to figure out how you got it working.

edit:I can't seem to be able to figure out how to access the javascript in your extension, so figuring out the fix myself is going to be difficult, it'd seem.. :P

edit: Right, so you put the javascript in onkeypress. Duh! I'm making good progress!

Edited by Desert Dog, 16 January 2012 - 04:14 AM.

  • 0

#15 Desert Dog

Desert Dog

    GMC Member

  • GMC Elder
  • 6409 posts
  • Version:Unknown

Posted 18 January 2012 - 02:11 AM

So I worked out something passable.. I can type in capitals, and backspace, which will do for now, (although *cough* if you posted your code to get all the bells&whistles, that'd save me a lot of time! */cough*)

What I'm currently trying to do is.. retrieve the value from the input box! I'm trying various methods, such as html_input.value, which doesn't work, and I'm in a bit of a pickle. Any assistance?
  • 0

#16 True Valhalla

True Valhalla

    ಠ_ಠ

  • GMC Member
  • 5277 posts
  • Version:Unknown

Posted 25 January 2012 - 12:16 AM

How do I implement this code? It's for displaying mobile ads in a GM game via the service AdMob. I've got the extension working, but trying to add this isn't working:

<script type="text/javascript">
var admob_vars = {
 pubid: 'a14f1baf48b3b55', // publisher id
 bgcolor: '356FA8', // background color (hex)
 text: 'FFFFFF', // font-color (hex)
 test: true // test mode, set to false to receive live ads
};
</script>
<script type="text/javascript" src="http://mmv.admob.com/static/iphone/iadmob.js"></script>

You won't be able to see it work, but I'd like the format it should be in?

I tried multiple ways of formatting it, so I'm starting to think it's a problem with the use of javascript perhaps?

edit: it just displays a # symbol btw.

Edited by True Valhalla, 25 January 2012 - 12:30 AM.

  • 0

#17 beatson

beatson

    GMC Member

  • GMC Member
  • 319 posts
  • Version:GM8

Posted 25 January 2012 - 01:56 AM

How do I implement this code? It's for displaying mobile ads in a GM game via the service AdMob. I've got the extension working, but trying to add this isn't working:

<script type="text/javascript">
var admob_vars = {
 pubid: 'a14f1baf48b3b55', // publisher id
 bgcolor: '356FA8', // background color (hex)
 text: 'FFFFFF', // font-color (hex)
 test: true // test mode, set to false to receive live ads
};
</script>
<script type="text/javascript" src="http://mmv.admob.com/static/iphone/iadmob.js"></script>

You won't be able to see it work, but I'd like the format it should be in?

I tried multiple ways of formatting it, so I'm starting to think it's a problem with the use of javascript perhaps?

edit: it just displays a # symbol btw.

I achieved this (changed my user-agent w/ firefox) by simply putting it into an iframe and linking to an external html file (didn't know the dimensions):
canvas_html_add(0,0,'<iframe src="test_ad.html" width="600" height="600"></iframe>');

Worked fine (think I was testing this as though I was on an Iphone)...

Edit: off-topic: User agent switcher is a great addon for testing stuff like this (requires firefox)

Edited by beatson, 25 January 2012 - 01:59 AM.

  • 0

#18 True Valhalla

True Valhalla

    ಠ_ಠ

  • GMC Member
  • 5277 posts
  • Version:Unknown

Posted 25 January 2012 - 02:53 AM

Thanks, I'll give that a go!

edit: How did you setup the html page? When I try to load anything it 404's. Or is it because I'm testing locally..?

edit 2: Well, big issue anyway...just having this extension installed causes all iOS touch functionality to fail.

Edited by True Valhalla, 25 January 2012 - 03:39 AM.

  • 0

#19 beatson

beatson

    GMC Member

  • GMC Member
  • 319 posts
  • Version:GM8

Posted 25 January 2012 - 09:47 AM

Thanks, I'll give that a go!

edit: How did you setup the html page? When I try to load anything it 404's. Or is it because I'm testing locally..?

edit 2: Well, big issue anyway...just having this extension installed causes all iOS touch functionality to fail.

I uploaded the file to a web server first, I didn't test it locally.

Really? That's strange. You could try scrapping the extension and putting the ad outside of the game - but that means you wouldn't earn revenue from it being hosted elsewhere... not very practical.
  • 0

#20 True Valhalla

True Valhalla

    ಠ_ಠ

  • GMC Member
  • 5277 posts
  • Version:Unknown

Posted 25 January 2012 - 11:02 AM

Which folder within the whole setup did you place ad_test.html in?
  • 0

#21 beatson

beatson

    GMC Member

  • GMC Member
  • 319 posts
  • Version:GM8

Posted 25 January 2012 - 02:08 PM

Which folder within the whole setup did you place ad_test.html in?

Sorry, I meant the ad_test.html wasn't local, the GM:HTML5 project was ran locally. So the Iframe looked like this:
<iframe src="http://myhost.com/ad_test.html">...

  • 0

#22 True Valhalla

True Valhalla

    ಠ_ಠ

  • GMC Member
  • 5277 posts
  • Version:Unknown

Posted 26 January 2012 - 01:16 AM

Ah I see what you mean now - thanks. Will give it a another go soon.
  • 0

#23 autukill

autukill

    GMC Member

  • GMC Member
  • 37 posts
  • Version:GM:Studio

Posted 27 February 2012 - 12:23 PM

:wacko: I find the canvas_html_set_x() and canvas_html_set_y() could not to run.
eg:
////////////////////old code
button_click = canvas_html_add_event();
html_code = '<button type="button" onclick="canvas_html_fire_event(' + string(button_click) + ')">Click To Make Ball Bounce!</button>';
html_button = canvas_html_add(32, 32, html_code);
///////////////////insert code
canvas_html_set_x(html_button,52)

Edited by autukill, 27 February 2012 - 12:35 PM.

  • 0

#24 stoneyftw

stoneyftw

    GMC Member

  • GMC Member
  • 112 posts
  • Version:GM:Studio

Posted 01 May 2012 - 02:39 PM

I'm using this extension in my game, and it's allowing me to pull the user's custom avatar image from my database using my php database extension, and into the game using this HTML extension. Big thanks to OP.

I'll post a tutorial on how to import images dynamically when I have a few minutes to spare. Thanks again!
  • 0

#25 _261131

_261131

    GMC Member

  • New Member
  • 1 posts

Posted 01 May 2012 - 09:55 PM

Hi,

I tried to embed a YouTube video, in the way as shown in the topic,
if i go to the next room and destroy the object which creates the YouTube video player, the YouTube Player is still visable (and still works) so the HTML code doesn't destroy.

I think I need to use the canvas_html_remove(id), but I don't know how to get the id of the youtube-code, and the example and documentation won't help me.
Is there anybody who can help me?
  • 0

#26 stoneyftw

stoneyftw

    GMC Member

  • GMC Member
  • 112 posts
  • Version:GM:Studio

Posted 01 May 2012 - 10:05 PM

Hi,

I tried to embed a YouTube video, in the way as shown in the topic,
if i go to the next room and destroy the object which creates the YouTube video player, the YouTube Player is still visable (and still works) so the HTML code doesn't destroy.

I think I need to use the canvas_html_remove(id), but I don't know how to get the id of the youtube-code, and the example and documentation won't help me.
Is there anybody who can help me?


I would imagine that the destruction code only destroys the gamemaker object. I don't think there's code for destroying HTML elemeents.
  • 0

#27 stoneyftw

stoneyftw

    GMC Member

  • GMC Member
  • 112 posts
  • Version:GM:Studio

Posted 02 May 2012 - 05:44 PM

I should add that there is a very nasty bug in this extension, that makes objects unclickable when browsing an HTML5 game on an iPad. I would love for the author to fix this, but I have not been able to contact him.

Bummer.
  • 0

#28 iceshield

iceshield

    GMC Member

  • GMC Member
  • 491 posts

Posted 02 May 2012 - 08:08 PM

Best extension for html5 ! Solves lots of problems :)
  • 0

#29 iceshield

iceshield

    GMC Member

  • GMC Member
  • 491 posts

Posted 12 May 2012 - 12:16 PM

How to make input fields work ? It seems that gm gets character keys for himself and input elements are left with nothing :(
  • 0

#30 wickedsunny

wickedsunny

    GMC Member

  • GMC Member
  • 128 posts
  • Version:Unknown

Posted 16 May 2012 - 12:53 AM

I wish to put my game on a blogger.

I am not a coder and your documentation is going over my head :)

Any help of how to use this with drag and drop?

Will credit you, Games Beta done, just need to publish on my blog and check.
  • 0




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users