|
|
metadata
> *Originally posted by **[Shay9999](/forums/4/topics/640187?page=1#10520129)**:*
> # **Advanced Tutorial – Collision Detection (Rectangles)**
>
> Often you’ll find you have two objects, and when these two objects ‘touch’, an event should occur. There are many ways to go about detecting all objects, but when you have your two objects, you’ll need to find out if these two objects overlap or ‘touch’. As you may have read above with the isTouchingCoin function, we have a basic way of testing for square areas by checking if the edges of the squares overlap one-another. Here’s a function to help:
>
> ```
> function rectanglesTouching(rect1, rect2)
> {
> if (
> // rect1's right side position is greater than or equal to rect2's left side position
> rect1.x + rect1.width >= rect2.x
> // rect1's bottom side position is greater than or equal to rect2's top side position
> && rect1.y + rect1.height >= rect2.y
> // rect1's top side position is less than or equal to rect2's bottom side position
> && rect1.y <= rect2.y + rect2.height
> // rect1's left side position is less than or equal to rect2's right side position
> && rect1.x <= rect2.x + rect2.width
> )
> return true; // The two are touching
> else
> return false;
> }
> ```
actually, you can just set variables like leftCollision, topCollision, etc. then make a variable called collision and set it to all of them or'ed together. Then return collision.
|
|
|
|
|
metadata
> *Originally posted by **[Shay9999](/forums/4/topics/640187?page=1#10520142)**:*
> # **Advanced Tutorial – Uploading to Kongregate**
>
> Before we begin, take a look at the [Kongregate Game Shell](http://developers.kongregate.com/docs/client-api/kongregate-shell)
>
> I’ve written up a ‘cleaner’ version for your game, but it’s important to always link the original. The version below will get your game Kongregate-ready in a quick second!
>
> **kongregate\_shell.html**
>
> ```
> <!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>
> <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>
> <script src='https://cdn1.kongregate.com/javascripts/kongregate_api.js'></script>
> </head>
>
> <body>
> <!-- 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:604px; height:404px; borders:none;">
> <!-- You can manually put your game iframe in here instead of calling embedFrame above if you wish -->
> <iframe id="TheGAME" width="604" height="404"></iframe>
> </div>
> <script>
> // Load the API
> var LoadingAPI = !window.location.protocol.startsWith("file");
> if (!LoadingAPI) onComplete();
> else kongregateAPI.loadAPI(onComplete);
> // Callback function
> function onComplete()
> {
> console.log("Loading Game");
> document.getElementById("TheGAME").src = "main.html";
> }
> </script>
> </body>
> </html>
> ```
>
> Now, here’s the final piece to-do before you upload your game. Make sure all .js and .html files are in the root folder (to say, all of those files are in the same folder as kongregate\_shell.html). Your images and audio can be in subfolders, so you shouldn’t have to worry to much about that. You’re going to need to select all of your files/folders (excluding kongregate\_shell.html) and compress it into a .zip file. I’ll name mine ‘version 001.zip’
>
> Head over to the [Upload a Game](http://www.kongregate.com/games/new) page.
>
> Enter in all of the information for your game. If you have art, music, or assets from someone other than yourself, **make note of them in the description**. Also, if any of them have Kongregate accounts, add them as collaborators. Remember, this is a group project if they helped you, and everyone in the group deserves to be recognized for their achievements.
>
> Click the continue button. From here, you’ll upload the actual game. Upload your game file, which is **kongregate\_shell.html**. Checkmark “I would like to upload additional files”. Upload your zip file ( **version 001.zip** ). Enter in the remaining information, including your icon, screenshots, tags, and even api data. If you added highscores, make sure to mark the highscore data here. Fill in the remaining form information and, tada, you’re done! Upload your game.
>
> It’ll come up with a preview for you to test the game and make sure it’s working properly. It may take a while for your game to fully load, so be patient. I’d suggest waiting about 24 hours before you actually publish the game to make sure all of the assets are loaded properly.
>
> Final note, your game may not function properly in the first few hours of publishing. I don’t know why, Kongregate gets so many game submissions that is probably backs up their server from time to time. In any case, don’t sweat it, just check back in a couple of hours to make sure it’s running smoothly.
>
> And, as always, happy developing!
>
>
I don't really get what you mean by document.getElementById("theGAME").src=blah blah blah. We never made a document called theGAME, as far as I know...
|
|
|
|
|
metadata
> *Originally posted by **[Zarkyl](/forums/4/topics/640187?page=2#10705178)**:*
> Hi , Im a noob (just a little, dont know about files and high level stuff) but I Know a little programming so can you tell me where did you you learn this all and send me a link(or anything like that) so I can learn it from there
Well, there's a very good book for jQuery and canvas and such: Javascript For Beginners, by Nicholas (I forgot the last name.) Published by No Starch Press. Costs about USD 20, and then there's w3schools.
|
|
|
|
|
metadata
Nowadays games are built using multiple languages! Each language has it's strengths and downfalls, so it's good to be able to choose!
[Here have a look at Assassin's Creed](http://www.drdobbs.com/parallel/assassins-creed-making-the-game/204300555) they use c++ for their main engine since you have full control over everything while being able to get best performance out of most languages. Then they used c# for their tools, tools are map/character/story editors and all sort of other things. C# along with .NET framework can speed up develop time a lot. Python is great to put things together, so they used it to quickly compile their game, since they have to target all sort of Windows OS, Playstation, Xbox, having an efficient compiler is a must.
Visual Studio provides you with debugging tools, intellisense, testing tools, compilation tools, database tools, auto-completion, etc, etc, etc. It aids you for faster development. You don't need it at all. You could simply use notepad to make your game. Nowadays, many people use [Sublime Text 3](https://www.sublimetext.com/) as it provides everything they need for IDE.
An engine is what you need it to be. All ya need is to compile that code. You want to make a text adventure? No need for graphics then, simply use the command line of current OS for it, all the engine would need is to display current events, a choice picker, a data loader and data saver.
Now let's say you want to make Far Cry 7, you need graphics this time to do them you'd either have to code everything for root or use existing libraries. From root, you'd have to learn Assembler one of the lowest level languages that exist, in fact so low that this is what GPU and CPUs compute. You'd have to write in Assembler your graphics processing so your engine could display them, this is messy long hard messy work, so best to grab a library such as OpenGL, DirectX which will cut your develop time a lot.
#### TL;DR; You can use existing libraries, to patch your engine together, make sure they are compatible with each other and compile properly or you can write everything down from scratch.
Edit: Forgot to mention these AAA games are nearly always not build from scratch, they mostly have an engine that's been tested and proven. Ubisoft uses their private engine [Anvil](http://tinyurl.com/h8g72g9) nearly all of their games since 2007 have been built using it
Unreal Engine, Frostbite, Unity, these "engines" were put together with these libraries all put together and a bunch of useful tools to speed up development. However they alone aren't enough to make your game, you need a few more scripts to get it running properly, these scripts are still considered to be your engine, they will however have the dependency of your chosen engine.
|
|
|
|
|
metadata
First lesson, many of your questions are quickly answered by google so use it often!
http://html5gamedevelopment.com/ is filled with tutorials and articles. Don't have to use CSS but CSS is for styling, it allows for easier and prettier graphics.
What's your interest with batch files? Don't need them for html5, the browser takes care of everything.http://www.tutorialspoint.com/batch_script/index.htm
|
|
|
|
|
metadata
**@[hazard_Gamer](/forums/4/topics/640187?page=1#10692609)**:
You've almost got it all down, but you need to correct for the spacing of the canvas and the position, too.
```
function clickHandler(event)
{
var clickX = event.clientX - canvas.getBoundingClientRect().left;
var clickY = event.clientY - canvas.getBoundingClientRect().top;
}
```
|
|
|
|
|
metadata
kongregate provides it's own ads on their page, using any other ads is not permitted. You can find more info about it here https://docs.kongregate.com/
search for gamedevelopment tutplus they should have all sort of beginner level tutorials
|
|
|
|
|
metadata
thenewboston won't teach ya about games.
I just remembered this guy he's very good. http://www.emanueleferonato.com/category/html5/
|
|
|
|
|
metadata
> *Originally posted by **[Shay9999](/forums/4/topics/640187?page=2#10709330)**:*
> **@[hazard_Gamer](/forums/4/topics/640187?page=1#10692609)**:
>
> You've almost got it all down, but you need to correct for the spacing of the canvas and the position, too.
>
> ```
> function clickHandler(event)
> {
> var clickX = event.clientX - canvas.getBoundingClientRect().left;
> var clickY = event.clientY - canvas.getBoundingClientRect().top;
> }
> ```
It is true my source is a bit outdated. They did change some things after the html5 update.
|
|
|
|
|
metadata
> *Originally posted by **[hazard_Gamer](/forums/4/topics/640187?page=2#10711876)**:*
> > *Originally posted by **[Shay9999](/forums/4/topics/640187?page=2#10709330)**:*
> > **@[hazard_Gamer](/forums/4/topics/640187?page=1#10692609)**:
> >
> > You've almost got it all down, but you need to correct for the spacing of the canvas and the position, too.
> >
> > ```
> > function clickHandler(event)
> > {
> > var clickX = event.clientX - canvas.getBoundingClientRect().left;
> > var clickY = event.clientY - canvas.getBoundingClientRect().top;
> > }
> > ```
>
> It is true my source is a bit outdated. They did change some things after the html5 update.
THANK YOU IT WORKED!!!
|
|
|
|
|
metadata
> *Originally posted by **[Zarkyl](/forums/4/topics/640187?page=2#10712802)**:*
> Do I have a To Make The Graphics with javascript
> And Is HTML5 a seperate Language or just the combination of Javascript and HTML5
> Is This A Good Place to Learn HTML and Javascrit https://www.khanacademy.org/computing/computer-programming ? If not then can you tell me a lace where I Can Learn Javascript And HTML.
http://www.w3schools.com/ is a great place to learn HTML5 and Javascript. HTML5 is the scripting language used for building websites, where Javascript is used for programming the websites. You can use any form of art and import them into HTML5 either using the HTML5 elements by hand, or by creating them via Javascript.
|
|
|
|
|
metadata
Uploading a game: When you have to select a category, which category does a tycoon fall into?
|
|
|
|
|
metadata
> *Originally posted by **[hazard_Gamer](/forums/4/topics/640187?page=2#10717144)**:*
> Uploading a game: When you have to select a category, which category does a tycoon fall into?
Depends on what the tycoon is. It would fall into its primary category (a sports team tycoon would be sports, a theme park tycoon would be miscellaneous, an RPG guild tycoon would be RPG, etc...), and of the categories listed on http://www.kongregate.com/games it would fall into the Strategy category as a generic "tycoon" catchall.
|
|
|
|
|
metadata
> *Originally posted by **[EndlessSporadic](/forums/4/topics/640187?page=2#10733512)**:*
> > *Originally posted by **[hazard_Gamer](/forums/4/topics/640187?page=2#10717144)**:*
> > Uploading a game: When you have to select a category, which category does a tycoon fall into?
>
> Depends on what the tycoon is. It would fall into its primary category (a sports team tycoon would be sports, a theme park tycoon would be miscellaneous, an RPG guild tycoon would be RPG, etc...), and of the categories listed on http://www.kongregate.com/games it would fall into the Strategy category as a generic "tycoon" catchall.
Thank you! They should really add a tycoon select though
|
|
|
|
|
metadata
> *Originally posted by **[Zarkyl](/forums/4/topics/640187?page=2#10714505)**:*
> Well Is There Another Good Place HTML5(Not HTML) ?
There are a lot of web tutorials. I would recommend Khanacademy's drawJS for people who just moved from block programming (like Scratch), but since drawJS is a library, I would not recommend it for advanced drawing because the functionality is limited.
|
|
|
|
|
metadata
I seem to have a little problem with my game.
Here's my code for the game (HTML, there's a JS part too):
```
<!DOCTYPE html>
<html>
<head>
<title>Ant Squasher</title>
<style>
canvas {
background: white;
}
</style>
</head>
<body>
<canvas id="canvas" width=600 height=600></canvas>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script type="text/javascript" src="https://cdn1.kongregate.com/javascripts/kongregate_api.js"></script>
<script type="text/javascript" src="antSquasher.js"></script>
<script type="text/javascript">
startLoading();
</script>
</body>
</html>
```
(antSquasher.js is my JS game file)
Here's the code for my game's shell:
```
<!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>
<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>
<script src='https://cdn1.kongregate.com/javascripts/kongregate_api.js'></script>
</head>
<body>
<!-- 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:600px; height:600px; borders:none;">
<!-- You can manually put your game iframe in here instead of calling embedFrame above if you wish -->
<iframe id="TheGAME" width="600" height=600"></iframe>
</div>
<script>
// Load the API
var LoadingAPI = !window.location.protocol.startsWith("file");
if (!LoadingAPI) onComplete();
else kongregateAPI.loadAPI(onComplete);
// Callback function
function onComplete() {
console.log("Loading Game");
document.getElementById("TheGAME").src = "antSquasher.html";
}
</script>
</body>
</html>
```
When I upload my game to Kongregate, I use my shell as the main file and a zip file containing my HTML and JS file as the additional file. The length and width of my shell are both 600 when I'm asked to input them.
When I upload onto Kongregate and then I publish, my game works fine. There's a problem, though. It's hard to describe, so just click on [this](http://www.kongregate.com/games/hazard_Gamer/ant-squasher) link for the game. I'm using chrome 54.0.2840.98 64-bit on the Mac. OS is Sierra.
|
|
|
|
|
metadata
I must be missing something, because surely there's no way that the many games with working audio for IE all paid thousands of dollars to license it.
Also, is it necessary to use a canvas element, or could you theoretically just use regular HTML images, buttons, and text?
|
 "hazard_Gamer"){kind=small}
 "Kewry"){kind=avatar}
 "Shay9999"){kind=small}
 "EndlessSporadic"){kind=small}
 "Alectric"){kind=avatar}