HTML5 Mobile Game Development for Beginners

iOS, Android, Amazon and Windows 8 game development course that will get you started with HTML5 game development.
  • Lectures 63
  • Video 5 Hours
  • Skill level all level
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

Course Description

At ZENVA we specialize in making high-quality technology courses that will give you all the skills you need to turn your ideas into reality. Get in touch to find out about our latest courses and discounts:

---------------------------------------------------------------------------------

This course will guide you through the creation of games that run on iPhone, iPad, Android, Amazon and Desktop using the open source LimeJS HTML5 game development framework.

The course is a 100% video based tutorial so that you can see in real time how games are created from scratch. Several game demos of different game genres are included in this course.

You've always wanted to make your own games. Don't keep on postponing it. Start TODAY with HTML5 game development for iOS, Android, Amazon and Windows 8.

Some of the things you'll be learning here are:

  • Creating a game that works on iPhone, iPad, Android, Amazon and Desktop
  • Using the touchscreen in your games.
  • Creating cool animations and transitions.
  • Adding sound to your games.
  • Creating your first spaceship game.
  • Using 2D physics in your games.
  • Creating a virtual pet game from scratch.
  • Creating a farming game from scratch.
  • BONUS TRACK: transform your game to a native app using Appcelerator and sell your game in the App Stores.
  • BONUS TRACK 2: learn how to publish your HTML5 games to the Amazon Appstore so that you can get access to millions of potential customers.

More great stuff:

  • We'll be using 100% free tools and frameworks.
  • Good support.
  • Code snippets at the end of each lesson that you can use as starters for your own games.

What are the requirements?

  • Basic knowledge of HTML, CSS and JavaScript is strongly recommended.

What am I going to get from this course?

  • Over 63 lectures and 5 hours of content!
  • By the end of the course, you will be able to create simple HTML5 games that run on iOS, Android, Windows 8 and the web
  • Learn how to create games using the LimeJS framework

What is the target audience?

  • Game enthusiasts who want to turn their game ideas into reality

What you get with this course?

Not for you? No problem.
30 day money back guarantee

Forever yours.
Lifetime access

Learn on the go.
Desktop, iOS and Android

Get rewarded.
Certificate of completion

Curriculum

Section 1: Intro
00:39

Learn how to make awesome games with just a web browser and a text editor.

---

Connect with ZENVA

What would you like to learn next?

08:40

Hi everyone,

My name is Pablo Farias, I'm founder of Zenva, a global company that specializes in web and mobile applications that support education. I would like to welcome you to this course. You are on the right track for turning those amazing game ideas you've always had into reality, and we'll do our best to help you get there.

Well, enough talking.. lets get the action started (actually, it will take a few videos to get properly started as we need to cover some basics, but we'll get there soon!)

NOTE ABOUT THE VIDEOS: when you watch our screencasts you need to press a button that says "HD" on the top right area of the video, this will give you a much better resolution.

---

Connect with ZENVA

What would you like to learn next?

Other Game Development Courses by Zenva
05:13
Section 2: Installation
04:45

Lesson for Ubuntu users

Mac and Windows screencasts are also available.

Firstly, we need to install the packages that are required for LimeJS to run. These are GIT, SVN and Pyton. We don't need to worry about Python, as it comes in Ubuntu already. Then, we'll download LimeJS and initiate the library so that we can get started with creating amazing games.

---

Connect with ZENVA

What would you like to learn next?

02:42

Lesson for Ubuntu users

Mac and Windows screencasts are also available.

After initiating LimeJS we'll create an empty game project which already comes with some sample data.

---

Connect with ZENVA

What would you like to learn next?

03:16

Lesson for Mac users

Ubuntu and Windows screencasts are also available.

Firstly, we need to install the packages that are required for LimeJS to run. These are GIT, SVN and Pyton. We don't need to worry about Python, as it comes in Mac OS already.

---

Connect with ZENVA

What would you like to learn next?

04:37
01:52

Lesson for Windows users

Mac and Ubuntu screencasts are also available.

Firstly, we need to install the packages that are required for LimeJS to run. These are GIT, SVN and Pyton. Then, we'll download LimeJS and initiate the library so that we can get started with creating amazing games.

---

Connect with ZENVA

What would you like to learn next?

03:43

Lesson for Windows users

Mac and Ubuntu screencasts are also available.

Firstly, we need to install the packages that are required for LimeJS to run. These are GIT, SVN and Pyton. Then, we'll download LimeJS and initiate the library so that we can get started with creating amazing games.

---

Connect with ZENVA

What would you like to learn next?

03:34

Lesson for Windows users

Mac and Ubuntu screencasts are also available.

Firstly, we need to install the packages that are required for LimeJS to run. These are GIT, SVN and Pyton. Then, we'll download LimeJS and initiate the library so that we can get started with creating amazing games.

---

Connect with ZENVA

What would you like to learn next?

01:42

Lesson for Windows users

Mac and Ubuntu screencasts are also available.

Firstly, we need to install the packages that are required for LimeJS to run. These are GIT, SVN and Pyton. Then, we'll download LimeJS and initiate the library so that we can get started with creating amazing games.

---

Connect with ZENVA

What would you like to learn next?

Text
Ubuntu 1. type in your terminal: sudo apt-get install python git-core git-svn 2. go to www.limejs.com , download zip package 3. extract somewhere, rename to limejs for simplicity. 4. go into this limejs folder in your terminal, type: bin/lime.py init 5. once everything has been downloaded, type: bin…
Section 3: Lights Camera Action!
Text

---

Connect with ZENVA

What would you like to learn next?

08:25

Let's get into the basics of LimeJS. Learn what the Director is and how it gives the application global settings such as screen resolution. We'll go over Scenes and you will learn how to put elements such as rectangles, circles or images into your game scenes. After this lesson you'll be ready to create your game's environment if you are too impatient and want to get started with building it right away.

---

Connect with ZENVA

What would you like to learn next?

09:21

---

Connect with ZENVA

What would you like to learn next?

Section 4: Rocket Launch
07:25

Lets get started with animations and user input for both mouse and touch based devices. Also, we'll go a bit deeper into displaying things on the screen and understanding how coordinates work in LimeJS.

---

Connect with ZENVA

What would you like to learn next?

09:02

---

Connect with ZENVA

What would you like to learn next?

03:11

---

Connect with ZENVA

What would you like to learn next?

03:59

---

Connect with ZENVA

What would you like to learn next?

8.06 KB

Coordinates in LimeJS start from the top left corner of the screen. This is the same manner it is done when using the HTML5 canvas element. The X axis increases when going from left to right, whereas the Y axis increases from top to bottom.

When working with Sprite elements (or other elements as well), they have their own coordinates which have their origin in their own top left corner. These coordinates are used when defining an "anchor point". Also, for Polygon elements, the coordinates of the poygon's points are given in these "inner" coordinates.

---

Connect with ZENVA

What would you like to learn next?

Section 5: Drag and Drop
09:50

Time for more action!

Lets get into adding drag and drop capabilities to our games. We'll look into an insect picking silly game to learn that and a few other tricks.

---

Connect with ZENVA

What would you like to learn next?

06:37

---

Connect with ZENVA

What would you like to learn next?

02:02

---

Connect with ZENVA

What would you like to learn next?

Section 6: Sound and More
06:03

In this lesson you'll learn a whole bunch of new tricks: using layers, buttons, adding sound to our games, having creatures moving randomly, and creating a splash screen.

---

Connect with ZENVA

What would you like to learn next?

06:13

---

Connect with ZENVA

What would you like to learn next?

07:08

---

Connect with ZENVA

What would you like to learn next?

606 B

If you want to force the bugs to stay inside the visible area, what you can do is add a check using the scheduleManager in order to change the bugs direction movement once they approach the edges.


I've done that in this modified version of bug.js which you can download and play with.

---

Connect with ZENVA

What would you like to learn next?

Section 7: Spaceship Game
04:16

In this lesson we'll be creating a neat spaceship game from scratch that works in any device supporting HTML5.

---

Connect with ZENVA

What would you like to learn next?

04:34

---

Connect with ZENVA

What would you like to learn next?

06:31

---

Connect with ZENVA

What would you like to learn next?

06:35

---

Connect with ZENVA

What would you like to learn next?

05:30

---

Connect with ZENVA

What would you like to learn next?

Section 8: Animated Enemies
05:14

The objective of this lesson, which is shorter than usual, is to show how you can use simple sprite animations in your games. So far we've seen other kinds of animations such as movement, rotation and fading. Using sprite animations allows you add a nice touch to your games. We'll be working on the same spaceship project.

---

Connect with ZENVA

What would you like to learn next?

Section 9: Making Birds very Angry (2D Physics)
10:01

Imagine you could build games such as Angry Birds or Cut The Rope. Well, if that draws your attention this is the right lesson for you. We'll get into the Box2D JavaScript physics library that already comes with LimeJS. We'll look into a basic example so you can familiarize with the basic concepts and can begin working on your own games with a good headstart.

---

Connect with ZENVA

What would you like to learn next?

04:37

---

Connect with ZENVA

What would you like to learn next?

07:01

---

Connect with ZENVA

What would you like to learn next?

Section 10: Deployment
06:47

In this lesson you'll learn how to compile your game project into a single JS file that you can deploy anywhere and that will work with just a web browser.

After generating this JS file, along with your HTML and game assets such as images, you are ready to deploy your game to its final destination.

Those files could also be converted to native phone apps using either tools such as PhoneGap or Titanium.

---

Connect with ZENVA

What would you like to learn next?

Section 11: Tile Based Maps
04:09

In this lesson we'll learn how to create tile-based maps using the open source Tiled Map Editor and how to import them in your games. Even though LimeJS is not particularly focused on tile-based games, it offers support for the TMX format (the one created with Tiled Map Editor).


When running the example locally, open it with Firefox as loading a local image file from XML is not allowed in Chrome (this is what happens when you load a TMX map). This restriction only applies when running the stuff locally, so if you put your game on the web it will indeed work in Chrome or mobile browsers that support HTML5.

If you just can't live without using Chrome for your local dev, you have to run it from command line adding the parameter: --allow-file-access-from-files (http://peter.sh/experiments/chromium-command-line-switches/ )

Other links from this chapter:

-Download Tiled Map Editor: http://www.mapeditor.org/

-Get free game art: http://opengameart.org/ (be respectful of the licenses!)

---

Connect with ZENVA

What would you like to learn next?

04:31

---

Connect with ZENVA

What would you like to learn next?

Section 12: Virtual Pet Games
05:31

---

Connect with ZENVA

What would you like to learn next?

02:42

---

Connect with ZENVA

What would you like to learn next?

03:43

---

Connect with ZENVA

What would you like to learn next?

05:15

---

Connect with ZENVA

What would you like to learn next?

01:48

---

Connect with ZENVA

What would you like to learn next?

Section 13: Farming Games
04:19

---

Connect with ZENVA

What would you like to learn next?

03:20

---

Connect with ZENVA

What would you like to learn next?

02:05

---

Connect with ZENVA

What would you like to learn next?

06:21

---

Connect with ZENVA

What would you like to learn next?

04:10

---

Connect with ZENVA

What would you like to learn next?

01:31

---

Connect with ZENVA

What would you like to learn next?

Section 14: Publishing HTML5 Games to the Amazon Appstore
Text

This lesson is an intro to the section where we cover the Amazon Appstore and how to publish HTML5 games to it.

---

Connect with ZENVA

What would you like to learn next?

04:31

In this video we introduce the Amazon Appstore for HTML5 app/game developers.

---

Connect with ZENVA

What would you like to learn next?

02:14

In this video we cover the steps to create an account as an Amazon App Developer.

---

Connect with ZENVA

What would you like to learn next?

06:29

In this lesson we talk about HTML5 webapps and games in the Amazon Appstore, and what the steps are to prepare an existing app for the store.

---

Connect with ZENVA

What would you like to learn next?

05:24

In this lesson we talk about the steps to publish a HTML5/web app or game to the Amazon Appstore.

---

Connect with ZENVA

What would you like to learn next?

Section 15: BONUS TRACK - Go Native and Sell your Games
12:20

So far we've created html5 game demos that can run in different browsers, mobile devices and tvs that support HTML5.

By transforming your html5 game to a native app, you can reach a huge audience through out the various app stores around. If you build a great product, you can use all these channels to monetize your creation.

This lesson, added as a Bonus Track, will guide you though the main steps of this process.

The links shown are:

Android SDK: http://developer.android.com/sdk/index.html

iOS SDK: https://developer.apple.com/devcenter/ios/index.action

Titanium Appcelerator: http://www.appcelerator.com/

Iphone icon template sizes: http://appicontemplate.com/

---

Connect with ZENVA

What would you like to learn next?

05:24

---

Connect with ZENVA

What would you like to learn next?

06:42

---

Connect with ZENVA

What would you like to learn next?

14.77 MB

This is the Titanium project "test1" we've created.

---

Connect with ZENVA

What would you like to learn next?

Section 16: About our other Game Dev course
03:05

---

Connect with ZENVA

What would you like to learn next?

00:32

---

Connect with ZENVA

What would you like to learn next?

04:30

---

Connect with ZENVA

What would you like to learn next?

Section 17: Course Evaluation Survey
Course Evaluation Survey
Text

Instructor Biography

Pablo is a web + mobile app developer and entrepreneur. Pablo is the founder of ZENVA. Besides teaching online how to create games, apps and websites to over 60,000 students, Pablo has created content for companies such as Amazon and Intel.

ZENVA runs four development communities featuring game, web and mobile app development tutorials: Zenva Academy, GameDev Academy, HTML5 Hive (also known as "the hive"), and for Spanish speakers, De Idea A App.

Pablo holds a Master in Information Technology (Management) degree from the University of Queensland (Australia) and a Master of Science in Engineering degree from the Catholic University of Chile. Specialized in web and mobile HTML5, his preferred technologies for the development of web and mobile apps are PHP (Symfony2 and Code Igniter), MySQL, JavaScript and NodeJS.

Join the biggest student community

5,900,000

Hours of video content

22,000,000

Course Enrollments

6,500,000

Students

Reviews

Average Rating
4.4
Details
  1. 5 Stars
    23
  2. 4 Stars
    5
  3. 3 Stars
    1
  4. 2 Stars
    0
  5. 1 Stars
    3
    • William Kerr

    Outdated

    Too many issues with outdated tools. Continued to have problems even after finding retro replacements for current files. i.e., subversion 1.7 is not available at the defined site due to updates and has the issue of incompatibility and no longer supported. Additional issues ensued with security obstructions such as not able to load local jscripting into browsers due to security risk and settings. I gave up after that.

    • Mr. Ashley Menhennett

    Great Course!

    This course is great for people that are new to HTML5 game development; it introduces the main concepts of game development.

    • Ale Pan_Housefra

    Examples well-structured

    The course is perfect for those who want to enter the world of game development because it has the perfect examples of well structured in a simple way to understand the individual aspects of a game. Of course, you must already have a background in HTML and JS. I hope will'be fixed bugs between Chrome and Lime.js

    • Laurie Morse

    Great class for getting started with HTML5

    Even if you aren't into games I think this is a good class to learning about things like Javascript.

    • Daniel Morgan

    Great Beginner course

    This class taught me the basics of what I needed to get started in making HTML 5 mobile games. With this knowledge I have the ability to go and make a mobile game and package it up for any mobile app store out there! If you can get a discount on the price I would highly recommend this class for anyone interested in mobile games.

Show more reviews
Ready to start learning?
Preview this course