What do i need to code HTML5 games?

[DELETE THIS ACC PLS]

Hello guys,

I was going to make games through Construct 2, But i wanted to learn coding HTML5 games ..

So .. What do i need to code them?

What i know is HTML5 games is made with JavaScript .. Do i need to learn any other coding methods?

And if i did .. What programs do i need to put my codes in so they turn to games?

If there's any article about this please link it in a comment, If not please explain in a comment.

Sorry for my stupid questions but i am starting out.

Regards,

Hadzy Hayman

[AhmedElyamani]

Hi,

Basically all you need is a text editor, notepad works, but you might want something more neat , like programmers notepad , my favourite.

You might be interested in the tutorials in this site: www.w3schools,com , Read the HTML , CSS , HTML5 , and javascript tutorials respectively , they will not take much time , also www.codeacademy.com is a very good site for javascript.

After that , take your time creating simple stuff with html , and using some javascript in the canvas elements. Some people use libraries that extends javascript basically to make it easier to work with , like Jquery for instance , there are some other that make it easier to build a game engine , for example.

It will take a lot of time to create something you would call a game , but start with simple stuff (doing the code academy stuff is a good start). 

 

Anyways many people , myself included , use game creation engines to create their games. Game maker:Studio and Construct happens to be the most common , I use game maker studio , and it works. It's gml is relatively similar to the syntax of javascript so that's cool.

[rich]

I'd get yourself a good book on the subject. There are many out there, but I'd recommend Core HTML5 Canvas by Geary.

[DELETE THIS ACC PLS]

Thanks Rich and Ahmed ..

From that i understand that GM:S isn't just a game engine? I mean i can code using it? Gml is similar to Js right?

I guess i am going to use GM:S to make games ...

About codeacademy.com i am already learning HTML/CSS from there so i think this is a good start

Thanks for the help ..

[Solidus]

GM: S is great in my opinion.  Powerful and will let you move on to Windows/Android/iOS when you're ready for true indie game dev.  If you ever want to go there

 

But learning HTML/JS/CSS helps with GM to extensions.

 

Thanks Rich and Ahmed ..
From that i understand that GM:S isn't just a game engine? I mean i can code using it? Gml is similar to Js right?
I guess i am going to use GM:S to make games ...
About codeacademy.com i am already learning HTML/CSS from there so i think this is a good start
Thanks for the help ..

[DELETE THIS ACC PLS]

Oh .. Great !

Like that i can make extensions for myself? That would be great ...

Thanks Solidus.

[Terrified Virus]

I too use GM:S to make HTML5 games. It is easy to allow these games to run well on mobile devices too.

 

But yeah, as Solidus said, learning scripting languages like JS will definitely help

[@Alex@]

Really all you need is a text editor like Notepad++ (My personal favourite for any coding related work) and a browser to test in. 

 

GameMaker-Studio is a good option too.  It will require a lot more initial investment but will be a lot easier to pick up, in my opinion than the alternative(learning javascript and using a text editor) but once you've got a little experience it will be very easy to make games that run in browser. 

 

With GameMaker you'd also be able to add export modules should you ever want to expand into the iOS/Android/Windows8/Other markets and be able to apply the knowledge you gained through developing for HTML5 to those apps as well. Pick up the free version of GameMaker-Studio and see if you like making a windows game in it (free doesn't have the ability to create an HTML5 Game) before buying it though.

[DELETE THIS ACC PLS]

That's what's bad about GM:S ...

I guess i'll continue with C2 until i get a better budget better than 0 xD

[DELETE THIS ACC PLS]

What about "Frameworks"?

Just wondering ...

[Terrified Virus]

Well Rich (forum admin) created a framework called Phaser, and it would probably be beneficial to learn how to use with your JavaScript, as there is a subforum specifically for support with this

[DELETE THIS ACC PLS]

Oh .. Good

[txvyrush2]

Can I extend the GML using javascript? I mean is there any way to extend and gamemaker code and I want to use Javascript. Very much newbie in this field.. thanks in advance

[tcsoft]

Construct 2 (C2) is good for beginner.  The learning curve is less steep considering that one does not need much programming background to use it.  And the good thing is that the free version already allows you to do some simple games.  You can then decide if you want to go for a personal license or not.

 

You may also extend C2 by building your own plug-in using Javascript, which is some advanced features.

[txvyrush2]

@tcsoft -- Construct 2 is looking good after seeing tutorial. But it seems it has only windows version. does it have any Mac version? And What will be basic difference between Construct 2 and Gamemaker that you are keeping C2 ahead? Actually I am almost going to buy a gamemaker license . So if I know the extra advantages of C2 then I may change my decision.

[tcsoft]

I don't think C2 offers a Mac version for now.  You'll need say Parallel Desktop on Mac to run Windows program.

 

I have no experience with Gamemaker, so can't really do a comparison.

[ChessScouter]

I personally do all my coding in Notepad++ or Sublime Text if I'm feeling fancy. Here's how I built http://www.ChessScouter.com

 

1. All code written in Notepad++
2. Version control with GitHub (so you can work with other people, and roll back to an earlier version if something breaks)
3. Objects written in their own .js files (pawn/king/knight/etc, board, game)
4. All UI done using HTML5 DOM elements (tables/divs/etc)
5. Logic bound to UI with jQuery in a "ui.js" file
6. Code runs in any HTML5 compliant browser

Hope that gives you some guidance and ideas! You'll learn a lot just by starting and getting your hands dirty! Chess Scouter is still in development so check out www.ChessScouter.com and follow @ChessScouter

 

[DELETE THIS ACC PLS]

I personally do all my coding in Notepad++ or Sublime Text if I'm feeling fancy. Here's how I built http://www.ChessScouter.com

 

1. All code written in Notepad++
2. Version control with GitHub (so you can work with other people, and roll back to an earlier version if something breaks)
3. Objects written in their own .js files (pawn/king/knight/etc, board, game)
4. All UI done using HTML5 DOM elements (tables/divs/etc)
5. Logic bound to UI with jQuery in a "ui.js" file
6. Code runs in any HTML5 compliant browser

Hope that gives you some guidance and ideas! You'll learn a lot just by starting and getting your hands dirty! Chess Scouter is still in development so check out www.ChessScouter.com and follow @ChessScouter

 

Great info.

Short and direct .. Really helps.

[mwatt]

In my opinion, you are taking on a lot all at once - probably too much - by trying to learn HTML, CSS, and JavaScript, and game programming all at the same time.   I'm sure most of us here learned those things over the course of several months or years.   While I think it is good to study these things with the intent of eventual mastery, If you want to learn to create games, GameMaker Studio or Construct 2 will probably get you up and running much faster.  I have never touched Construct 2, but probably, as in GameMaker, you can add JavaScript code in at certain places to do more "customized" things than the IDE allows.  This gives you a chance to practice JavaScript and still be productive right away.

 

Having said that, it is very rewarding to create something using a programming language - for me, things like Construct 2 and GMS take some of the fun out of it.  However, these are very popular solutions and should not be overlooked as possibilities.  

 

Alternatively,  there is a halfway point that might offer the sweet spot once you get to a journeyman level at JavaScript.  This is the use of engines such as Phaser (already mentioned here), or any of several other popular and capable engines. Other examples are: ImpactJS (not free), EaselJS, Three.js, melonJS, LimeJS, echant.js and the list goes on.

[iprasila]

Hello guys,

I was going to make games through Construct 2, But i wanted to learn coding HTML5 games ..

So .. What do i need to code them?

What i know is HTML5 games is made with JavaScript .. Do i need to learn any other coding methods?

And if i did .. What programs do i need to put my codes in so they turn to games?

If there's any article about this please link it in a comment, If not please explain in a comment.

Sorry for my stupid questions but i am starting out.

Regards,

Hadzy Hayman

 

My advice is to take the JavaScript course from http://www.codecademy.com/ . It is free and it will take you 1 - 2 days to finish. The course is interactive and entirely contained in the browser (you can do the exercises on their website directly).

 

After that you can read HTML5 game development book or some tutorial. 

[Finnegan2100]

I'd recommend reading the book by Rex Van Der Spuy. It's one of the best HTML5 resources out there for beginners and it starts you off completely from scratch.  

http://www.amazon.com/Foundation-Game-Design-HTML5-JavaScript/dp/1430247169 

It covers basic HTML, CSS + Javascript all in one volume.

 

Of course, you could always check out my lessons too! ***shameless plug***

http://warmseaorchard.com/Lessons.html

[Bluevessel Games]

Can I extend the GML using javascript? I mean is there any way to extend and gamemaker code and I want to use Javascript. Very much newbie in this field.. thanks in advance

yes  you can, in the official forum, a lot of tutorials about this exist.

[ChuckLeone]

Since you are just starting out and have no prior experience with any programming languages I would definitely get started using something like Construct 2 or GM:S (like others have recommended). Working with a tool like this will give you the basic concepts of how game logic and design works without needing to learn a language. It will also give you more bandwidth to spend time on creating assets like graphics, sprites, music, sound fx, etc. what will set your games apart from the rest. Check out the games from Loco Malito http://www.locomalito.com/ he uses GM:S and his game are top notch. He's getting great results without having to write any code.

 

In tandem with that though I would highly recommend you try to learn a programming language if you can. Even if you don't become proficient at programming it will help you in the long run to better understand what exactly is going on in the background of the game and give you the knowledge to know what can and can not be done by said languages. 

 

Like another forum member has mentioned I would recommend you learn JavaScript from free education sites like http://www.codecademy.com/, https://www.khanacademy.org/  or buy a subscription to http://www.lynda.com or http://teamtreehouse.com. I used codecademy and teamtreehouse to educate myself on JS, jQuery and other topics along with reading books such as HTML 5 Canvas by Steve and Jeff Fulton http://shop.oreilly.com/product/0636920013327.do or any of the other books that members here have recommended. All of the sites I listed also offer HTML, CSS and many other languages and topics. Lynda.com offers a lot of topics unrelated to coding that you might find useful in game development such as digital illustration, audio and music production.

 

Game development should be fun, so do whatever you find more fun. If working in a non-coding tool like GM:S is more enjoyable to you than writing your own code, then definitely go that route. Programming can be daunting work, especially for beginners and the non-coder types but it can also be greatly satisfying for the DIYers like me. 

 

I hope this helps.

[Victor]

 He's getting great results without having to write any code.

 

This is inaccurate. Locomalito's games are programmed with GML, the C-based internal GM language.

Internally GM games are an OOP, Event Driven program. You define Objects, Events and then code the internal logic with GML or the predefined GM actions.

 

http://en.wikipedia.org/wiki/Event-driven_programming

http://en.wikipedia.org/wiki/Object-oriented_programming

 

@Hadzy Hayman

 

I have no problem to program any language but I'm a tools guy. If a tool is enough to my (or yours) needs, why spend time learning another tool? I'll do when the old tool will be going small to me. Remember that coding is only one of the abilities that you must have to make games. I see many grfx guys that learn a tool (GM and Construct mainly) and make a game for themselves. But there aren't many coders that can make grfx.

 

So I choose a tool (GM:S) and with the saved time I'm learning graphics. I tried with pixelart (GraphicsGale, Promotion, Paint, Pixeljoint.com, tutorials, etc...) and now I felt in love with Vectorial (Inkscape).

 

People don't care how do you program your games.

 

Anyway, if you keep wanting to learn HTML5 (or any other programming language), a good book is your best friend. When you end with it, choose a framework with a good community (and good books). The last step his to code all for yourself.

[ChuckLeone]

This is inaccurate. Locomalito's games are programmed with GML, the C-based internal GM language.

Internally GM games are an OOP, Event Driven program. You define Objects, Events and then code the internal logic with GML or the predefined GM actions.

 

http://en.wikipedia.org/wiki/Event-driven_programming

http://en.wikipedia.org/wiki/Object-oriented_programming

 

 

Thanks for the correction.

 

Looking at Inkscape now... seems like a decent apps, thanks for posting.