Translations

Know another language? Translate this tutorial!

Stats

4.2K visitors
23.3K page views
265 translation visitors
715 translation page views

Uploading HTML5 games to Kongregate

Favourite 30 favourites
Tutorial written by TheOMPOriginally published on 22nd, November 2011 - 5 revisions

What is Kongregate?

Kongregate.com in the most basic description, is a flash game website that offers tons of games to play from various developers. Its a great source for those starting out as ideas often get feedback rather quickly. Its a nice place to make a little cash as well as Kongregate features an ad revenue type service that shares up to %50 of its revenue with indie developers (This of course depends on how many plays your game gets).

A Few things to Note.

Kongregate.com is mainly a flash game site, meaning most of the games on there are made in either flash, or Unity. However, Kongregate can support JavaScript.

All non-flash games need to be manually approved by the Kongregate staff after uploading before they can be published.

Don't let this discourage you though, as Kongregate generally publishes them. The specifics of whats required to publish a game are here.

With that said, lets continue to the tutorial.

Kongregate offers a Template on their site for the JavaScript API. Within this template is three files- Assets, Game.html and kongregate_shell.html. You only need the shell file.

1.Export your game as an "HTML5 website." This will make the tutorial all the more easier to follow. Also, Download the "HTML shell" template which can be found here.

2. Unzip the file to your desktop for easy access.

3. Open up the resulting folder and take the kongregate_shell.html file. Drag the over to your games core directory and place it there.

4.Open up the file and navigate toward the bottom of the code until you see this:

    <div id="contentdiv" style="top:0px; left:0px; width:700px; height:500px; borders:none;">
    </div>
That is where we will place our iframe code.

Extra: You'll also notice that a few lines above you'll see an Embed for the game. To make doubly sure that the game works on all browsers I left the embed there and changed the quote in the line from "game.html" to "index.html"

5.Within the "contentdiv" place this code:

        <iframe src = "index.html" width = "[gamewidth]" height = "[gameheight]">
    		<p>This Browser does not support the iFrame.</p>
    	  </iframe>
Where you would enter the specifications relevant to your game respectively.

Thats pretty much it for part of wiring your game to work within the API. Next you'll need to upload it Which is covered on the next page.

Comments

2
Kyatric 41.3k rep

Thank you for sharing your experience.
I'm sure this will help a lot of people in their journey to find a place where to upload their games.

Tuesday, November 22, 2011 at 6:28:54 PM
1
ludodesign 22.5k rep

Its a new site to me. I really liked it.

Wednesday, November 23, 2011 at 8:23:55 PM
0
chrisbrobs 6,470 rep

Can you supply a link to download the API template?
I cannot find it on the Kongregate website.

Monday, December 05, 2011 at 10:32:03 PM
0
chrisbrobs 6,470 rep

Ignore my last Question...i found it.

Monday, December 05, 2011 at 10:34:56 PM
0
mrsponkie 3,867 rep

hello there,

it was a significant error in the tutorial. That made me crazy for half past an hour because i opened my kongregate_shell.html with a .txt just to make it faster. At the point 5 of 1st page you should add "<" before the "iframe src"...
regards,

mrsponkie.

Saturday, December 17, 2011 at 3:48:43 PM
0
LithiaKnight 2,804 rep

When I preview my game their are scroll bars on the frame. Did I do something Wrong?

Saturday, December 17, 2011 at 8:57:22 PM
1
TheOMP 3,507 rep

LithiaKnight: The same thing happened to me. You may need to make the game a little smaller than the iframe.

Mrsponkie: Sorry for the error, I'll correct it immediately!

Sunday, December 18, 2011 at 7:39:41 AM
0
LithiaKnight 2,804 rep

Thanks ill try it

Monday, December 19, 2011 at 2:45:36 AM
0
zack2029 7,374 rep

Thanks for your sharing, I'll try it.

Wednesday, February 22, 2012 at 7:31:07 AM
0
ludodesign 22.5k rep

The second page ask to put a flash or unity game =(

Friday, March 09, 2012 at 9:24:40 PM
0
Mastasurf 2,472 rep

Does this still apply now that there is a Kongregate exporter?

Saturday, March 10, 2012 at 2:49:07 AM
0
Jeremy8291 2,058 rep

need pictures showing exactly how to do this please?

Monday, March 19, 2012 at 6:14:38 PM
0
TheOMP 3,507 rep

Hello Everyone, I did here the recent news of the Kongregate Exporter as well as the news that Kongregate is now enabling Devs to self-publish HTML5 games to their site.

I'm sorry that some of you are having trouble and I'll try to post pictures so that you all can have a visual aid to help understand the tutorial.

Friday, March 23, 2012 at 3:55:29 AM
0
Quique 4,797 rep

Hi TheOMP, i found this quite interesting, but are you still working on this?, please, its very difficult to find something about this topic Greetings!!!

Wednesday, May 30, 2012 at 6:55:22 PM
0
railslave 4,476 rep

my game uploaded but it was tiny, i tried changing thing in the shell but still no joy

Saturday, July 14, 2012 at 11:12:16 AM

Leave a comment

Everyone is welcome to leave their thoughts! Register a new account or login.