Create HTML5 Vertical Endless Runner cross platform games

Using Phaser framework and other FREE software
Endless runner games are gaining more and more popularity and they are really easy to code.
I will take you by hand through the creation of a complete HTML5 vertical endless runner cross platform game with a lot of features and room for customization.
100 pages + 31 source code examples with a free update to come in a few days.

Guide to Mochi Media services – How to set up a game and enable for Live Update

Emanuele Feronato Actionscript 3, Flash, Game design, Monetize

I am using Mochi Media services for almost four years and I was the first to use their in-game leaderboards, so when I recommend them I know what I am talking about.

What happened during these years? Mochi grew a lot and from a simple service to display ads and let you earn money, like a lot more you can find on the web, became a complete solution to improve players’ experience allowing you to track links, introduce achievements, leaderboards, in-game shops and more, while keeping the main feature: let developers make money with their games.

With this huge set of offers, often new developers get lost and end with adding Mochi APIs without the full control of their power.

This guide will cover all Mochi services with a real world example, to make clear how to get the most out of your game and the Mochi API.

Your first Mochi game

If you aren’t already registered with Mochi Media do it, and once you are logged in select ADD GAME:

You will be asked to fill some basic game informatin in the Add a New Game page:

Enter the title, the dimensions in pixels with the [width]x[height] format, agree to terms and conditions and enable Live Updates.

Enabling Live Updates will give you access to an incredible set of features, such as:

* Your game will be encrypted, preventing it to be decompiled from code thiefs
* Your game will be loaded with a Mochi preloader showing an ad. No need to build your own preloader, and you are making money at each game load.
* If you game is widely distributed around the web and you need to fix a bug or make any kind of change, just do it and update the game on Mochi servers. They will take care about the rest.

Then, click on CREATE GAME and proceed to next step.

Here you will be asked to authenticate your game. It’s simple, as you just need to copy/paste the line of code with your Mochi game id into your game.

In the example I am making, the code of the main class is this one:

As you can see at line 4, there is my game id.

That’s all. Although the page suggests you to download and include their APIs, it’s not necessary at the moment.

Now you have to style the preloader ad. You don’t want to use the default preloader, so we will upload our own image.

Here is the image I am using:

Notice how there are reserved spots in the background, where the ad and the preloader bar will be shown.

Finally upload the game, give it a version number and a description which won’t be public and will help you to recognize the various versions of the game you are working on, and press UPLOAD YOUR GAME.

Eureka! Your game is ready to make money.

Now you can download your live updates enabled game inside the zip package. Extract the game from the zip package, execute it and you should see this screen:

Press DONE to complete game creation.

You will be brought to your game dashboard, but we will look into it next time, meanwhile here it is the game with the Mochi live updates preloader enabled:

You may need to reload the page to see the preloader working.

At this step, your game isn’t actually making money because it hasn’t been approved yet. But you can test everything is ok with preloader and custom background placement.

Stay up to date
Follow me on the social networks and never miss a post.

Official Emanuele Feronato Facebook page

Official Emanuele Feronato Twitter account

From null to full HTML5 cross platform game

I will take you by hand from the bare bones of JavaScript programming through the creation of a full cross platform HTML5 game, with detailed explainations and source code.

If you don't know where to start, then From null to full HTML5 cross platform game is the book for you.

Comments 16

  1. MC

    Hi Emanuele,
    do you know how can you update the game manually?
    (how to create a loader that works everywhere like liveUpdates?)
    regards

  2. Wayne Marsh

    Great, thanks Emanuele! A tutorial on clicking buttons that already have explicitly written documentation and instructions next to them. USEFUL and definitely not SPAM.

  3. kumo

    I think Mochi Media should help developers by simplified things so that game designers can focus on game design. Good attractive games make money. So it will be very helpful if game designers are not disturb by trying to make enough money to start their next design.

  4. Post
    Author
  5. None

    I am really, REALLY glad that Emanuele ignores these trolls and other stupid comments and keeps on publishing interesting yet easy to grasp tutorials allowing readers like me to discover new and interesting resources and whatnot.

    Keep up the good work! There’s tons of people not commenting articles but appreciating a lot what you’re doing.

  6. Bryon

    I agree with “None”

    Thank you very much for this tutorial. It helped me understand it better, just ignore those trolls and keep doing what your doing!!

  7. Leo

    Hi, nice article.

    I tried following your instructions but i cant seem to get my game to load. I added the game id code to my main class and uploaded the swf file to mochi with the live updates feature. The preloader seems to work but after that i just get a blank white screen.

    Would this have something to do with the mochi code or with my code?

  8. Pingback: My first Mochigames game | Artits Rastas

  9. Nuno

    Hi,

    When I upload my game to mochimedia, the preloader seems work, but after that when I run the link and when I download the game file.. I get all white … why does that happen? I think I did everything as the tutorial says ..

  10. Arnold

    Hello! This seems cool and I really want to try it out. But I have a question. Is it legal/safe for a 16-year old like me to join mochi and make money from it?

Leave a Reply

Your email address will not be published. Required fields are marked *