Javascript Disabled Detected

You currently have javascript disabled. Several functions may not work. Please re-enable javascript to access full functionality.

HTML Extension

Started by Schalk, Oct 18 2011 09:43 AM

Next

Please log in to reply

47 replies to this topic

#1 Schalk

GMC Member

GMC Member
487 posts

Version:GM:HTML5

Posted 18 October 2011 - 09:43 AM

Posted Image HTML 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 Schalk, 18 October 2011 - 09:48 AM.

2

Back to top

#2 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

Back to top

#3 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

Back to top

#4 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

Back to top

#5 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

Back to top

#6 epilobello

GMC Member

New Member
162 posts

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

Back to top

#7 epilobello

GMC Member

New Member
162 posts

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!!

0

Back to top

#8 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

Back to top

#9 beatson

GMC Member

GMC Member
317 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

Back to top

#10 Desert Dog

GMC Member

Global Moderators
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

Back to top

#11 njp

Panda

GMC Member
2325 posts

Version:GM8

Posted 06 January 2012 - 04:56 AM

thank you thank you! life saver!

im completely serious!

0

Back to top

#12 rickster

GMC Member

GMC Member
18 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

Back to top

#13 time-killer-games

GMC Member

Banned Users
539 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.

exellent work.

Back to top

#14 Desert Dog

GMC Member

Global Moderators
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..

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

Back to top

#15 Desert Dog

GMC Member

Global Moderators
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

Back to top

#16 True Valhalla

ಠ_ಠ

Retired Staff
4880 posts

Version:GM:Studio

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

Back to top

#17 beatson

GMC Member

GMC Member
317 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

Back to top

#18 True Valhalla

ಠ_ಠ

Retired Staff
4880 posts

Version:GM:Studio

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

Back to top

#19 beatson

GMC Member

GMC Member
317 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.