|
|
metadata
> It's complex to explain, but in short you'll need the HTML5 extension, and when uploading the game, you upload the index file as the 'main game' and then include the folder the actual game is in in the 'additional files' folder.
That's what we do with all HTML5 games. Shell in the main game and game in the additional files.
|
|
|
|
|
metadata
> *Originally posted by **[hazard_Gamer](/forums/4/topics/640187?page=4#11545884)**:*
> > It's complex to explain, but in short you'll need the HTML5 extension, and when uploading the game, you upload the index file as the 'main game' and then include the folder the actual game is in in the 'additional files' folder.
>
> That's what we do with all HTML5 games. Shell in the main game and game in the additional files.
True. There's documentation on how to upload games using gamemaker studio [Here](https://help.yoyogames.com/hc/en-us/articles/216753988-Integrating-The-Kongregate-API-In-HTML5-Games)
The differences between gamemaker studio and gamemaker studio 2 uploads is extremely simple- gamemaker studio 2 automatically zips up all your files for you, saving you a step.
The javascript extension still works too, although the kongregate shell page does not, and it's slightly different than the one on the first page of the html5 tutorial. The code you use for your shell for Gamemaker Studio 2, I believe is the following:
-----
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
> <head>
> <title>Kongregate Game Shell</title>
>
> <!-- Load the Kongregate Javascript API -->
> <script type="text/javascript" src="https://www.kongregate.com/javascripts/kongregate_api.js"></script>
>
> <!-- Give the shell no border/scroll bars and match the Kongregate background color.
> If your game needs scrollbars, you might need to modify these styles -->
> <style type="text/css">
> html{border: none; overflow: hidden; background-color: #333;height: 100%;}
> body{border: none; background-color: #333;margin:0; padding:0;}
> </style>
> </head>
>
> <body>
> <script type="text/javascript">
> // Called when the API is finished loading
> function onLoadCompleted(){
> // Get a global reference to the kongregate API
> kongregate = kongregateAPI.getAPI();
>
> // Embed the game into the "contentdiv" div, which is defined below. You can also
> // manually create your own iframe, this function is just for convenience.
> kongregateAPI.embedFrame("index.html");
> }
>
> // Begin the process of loading the Kongregate API:
> kongregateAPI.loadAPI(onLoadCompleted);
> </script>
>
> <!-- The div that the game will be placed into. Make sure to set the Width and height properly -->
> <div id="contentdiv" style="top:0px; left:0px; width:700px; height:500px; borders:none;">
> <!-- You can manually put your game iframe in here instead of calling embedFrame above if you wish -->
> </div>
> </body>
> </html>
|
|
|
|
|
metadata
I want to learn how to create HTML5 games. Can anybody help me out?
|
|
|
|
|
metadata
> *Originally posted by **[slotozilla](/forums/4/topics/640187?page=4#11568370)**:*
> I want to learn how to create HTML5 games. Can anybody help me out?
You can follow the tutorial here :)
|
|
|
|
|
metadata
> *Originally posted by **[Shay9999](/forums/4/topics/640187?page=1#10520124)**:*
> # **Advanced Tutorial – Audio and Images**
> **Working with Audio**
>
> There are only 3 supported audio files, and not all browsers support all files. **MP3** is supported by all the popular browsers, but requires a license in order to use (link below). **WAV** is **not** supported by internet explorer. **OGG** is **not** supported by internet explorer or Safari. Make sure your audio file is managed by the browsers you’re presenting to.
>
> **MP3 Licensing:** [http://mp3licensing.com/royalty/games.html](http://mp3licensing.com/royalty/games.html)
There is a fix to this! MPEG-4 AAC, combined with OGG support covers all modern browsers!
Source: https://www.scirra.com/blog/64/why-you-shouldnt-use-mp3-in-your-html5-games
|
|
|
|
|
metadata
Thanks CharlotteFields!
I went ahead and updated the tutorial with the additional format and what browsers it does not work on.
|
|
|
|
|
metadata
I wrote a freely available HTML5 game engine and editor called Booty5, this may be a good place to start http://www.booty5.com. Its Windows only though I'm afraid. I used to to create the animation header for my latest games web site at http://cookieclickersavetheworld.com//. I also use it to create games for clients.
|
|
|
|
|
metadata
Apparently, the line var LoadingAPI = !window.location.protocol.startsWith("file"); in the kongregate shell causes blank screens on internet explorer as it does not support the startsWith property. I'm getting complaints my games don't work on IE. I know it's a rather outdated browser, but has anyone considered a workaround for this?
|
|
|
|
|
metadata
> *Originally posted by **[GameLeaf](/forums/4/topics/640187?page=4#12380647)**:*
> Apparently, the line var LoadingAPI = !window.location.protocol.startsWith("file"); in the kongregate shell causes blank screens on internet explorer as it does not support the startsWith property. I'm getting complaints my games don't work on IE. I know it's a rather outdated browser, but has anyone considered a workaround for this?
Delete that line (and following if-else statement) and go straight to:
```
kongregateAPI.loadAPI(onComplete);
```
That line I put in there was for the sake of game testing, as the KongAPI can't be loaded in some test environments.
|
|
|
|
|
metadata
Thank you Shay9999 for creating this thread, i wanted to re-start creating games and i have seen that flash it's not the best option at this time; so i came to your thread and start learning with it :)
Some words: I think you should consider updating the thread with some things like [mp3 licensing it's not necessary anymore](https://www.iis.fraunhofer.de/en/ff/amm/prod/audiocodec/audiocodecs/mp3.html) so anybody can use .mp3 in their games for maximum compatibility, also, i think you should replace or, at least mention, that [setInterval and setTimeout methods are much better replaced with the new requestAnimationframe method](http://www.javascriptkit.com/javatutors/requestanimationframe.shtml) which nowadays is supported by almost any browser without any implementations! (although, if it werent for that i wouldnt have learned all what i learned searching by myself, so thanks again Shay!)
Also: Starting with the first part of this tutorial, i added more and more things and with some days of continuous work it has became [my first HTML5 game: Coin Collecter](https://www.kongregate.com/games/valeenconti/coin-collecter)! if somebody want to check it out it's right there, it's really really simple but hey, i learned a lot creating it! thank you :)
|
|
|
|
|
metadata
This post has been removed by an administrator or moderator
|
|
|
|
|
metadata
Have you tried to publish a html5 recently? it does not work, even with the most simple html file.... it just shows a black screen
|
|
|
|
|
metadata
Gamemaker is also a good pick for HTML5, but you have to pay for that!
|
|
|
|
|
metadata
Hi shay, first, thanks for the tutorial!
second, I have a question: how do I create buttons for my game? I can't figure it out. Do I have to create them in HTML5? But then how do I add functionality to them?
|
|
|
|
|
metadata
Got an error while running through the basic tutorial.
When getting the player to follow the mouse I got the error "Uncaught TypeError: Cannot read property 'addEventListener' of undefined
at main.js:42" On Google Chrome. To fix it change
//eventCatcherDiv.addEventListener("mousemove", canvasMove); to
//document.addEventListener("mousemove", canvasMove);
|
|
|
|
|
metadata
For the button...
This is what I did for my game - D3structor
This way you can create multiple buttons with a couple lines in JS
HTMLDiv = document.getElementById("myDiv");
var MenuDropDownBtn = new createHTMLButton("MenuDropDown", "OPTIONS", rnbwStyle, function(){
callUserMenu();
}, doNothing, doNothing);
var setBgColorBtn = new createHTMLButton("BgColorBtn", "COLOR", btnStyle, changeBackgroundColor, mouseInBackgroundColorButton, mouseOutBackgroundColorButton);
function createHTMLButton(buttonName, buttonText, style, clickFunction, mouseEnterFunction, mouseLeaveFunction){
//create the named button
this.btn = document.createElement("button");
//give the button an ID
this.btn.id = buttonName;
//set the button's style
this.btn.style = style;
//create event listener(s) for the button
this.btn.addEventListener("click", function(){
clickFunction(document.getElementById(buttonName));
});
this.btn.addEventListener("mouseenter", function(){
mouseEnterFunction(document.getElementById(buttonName));
});
this.btn.addEventListener("mouseleave", function(){
mouseLeaveFunction(document.getElementById(buttonName));
});
//append text to the button
this.btn.appendChild(document.createTextNode(buttonText));
//append the button to the div element
HTMLDiv.appendChild(this.btn);
}
function doNothing(){
return null;
}
|
|
|
|
|
metadata
Quest.ai is an IDE that let's users easily build Phaser 3 games and publish them here in Kongregate. Here's a useful articel to get started:
http://quest.ai/tutorials/kongregate
|
|
|
|
|
metadata
I've been trying to save values in my game(Not really related to the tutorial but I guessed here would be a good place to ask) and it doesn't seem to work whatever I do. Can someone tell me why? This is my line to load the data
```
var ozolith = 0
kongregate.sharedContent.addLoadListener("Ozolith",ozolithLoad)
function ozolithLoad(){
let content = parseInt(args.content)
ozolith = content
}
```
and here's the one that saves
kongregate.sharedContent.save("Ozolith",ozolith)
|
|
|
|
|
metadata
This post has been removed by an administrator or moderator
|
|
|
|
|
metadata
Is it possible to learn to code on your own? I am very interested in programming but I am not sure I can handle it. Besides, I need to find a [mobile app agency](https://stormotion.io/) to create one for my new project. Who can recommend a good one?
|
|
|
|
|
metadata
> *Originally posted by **[Delliar](/forums/1021798/topics/640187?page=4#13428093)**:*
> Is it possible to learn to code on your own?
Yes, definitely. Coding is odd in that there's more than one way to learn how to do it. Some people learn best though formal education. Some from books and videos. Some from just deciding to give it a try and seeing what they can do. Now more than ever there are so many places you can find resources to learn from, whatever you want to do.
Do you have access to an iPad? Download Apple's "Playgrounds" app. It's free and lets you do programming, real programming, in the app, whenever you have a spare few minutes. It's not for everyone but you should find out quickly whether it interests you and you can learn that way.
|
 "hazard_Gamer"){kind=small}
 "Bluemysterywolf"){kind=small}
 "slotozilla"){kind=small}
 "CharlotteFields"){kind=small}
 "Shay9999"){kind=small}
 "drmop"){kind=icon}
 "GameLeaf"){kind=small}
 "valeenconti"){kind=small}
 "Nordan66"){kind=small}
 "franmcod"){kind=small}
 "Jakeconer"){kind=logo}
 "Oscuraluza"){kind=small}
 "HouseAttack"){kind=icon}
 "SciOptic"){kind=small}
 "AndrewJasper"){kind=small}
 "DatMADPlayer"){kind=small}
 "anismith13"){kind=small}
 "JWBSoftware"){kind=small}