Make Your Own Browser Based Games with Scirra

Not long ago, games were meant for hardcore gamers and were for those with high end desktops. But now, there are so many games available in so many forms, people actually have to find some time in between games to catch up with work. Every kid and their grandma is now playing one game or another, thanks largely to casual and social games.

Browser based games are immensely popular because they are real fun to play and most of them even work behind the firewall of organizations. These games might appear simple, but in fact a lot of design and coding has to be done to bring them to life. For those with cool ideas but no coding knowledge, apps like Scirra Construct are a boon. After the break, let’s dive in and see how to create our very own browser based game in HTML5.

Overview

Overview

Overview

Construct 2 from Scirra is an amazing app that lets you create browser based games and no programming knowledge is required. Run your games on Mac, iPhone, iPad, Windows and Linux just like a Flash game, but no plugins necessary. Construct 2 can make platform games, puzzle games, space games, and more: your imagination is the only limit!

Pricing

While the free beta version might be limited, it serves as a great learning ground for an aspiring game maker. Once you are convinced that Scirra is the silver bullet, you can purchase a license to go on to create a full blown game with unlimited layers and great sound and video effects.

The developers candidly admit that they are still working on Construct 2, so now is the time to pick up a cheaper Early Adopter license.

Pricing

Pricing

While the pricing plans and features that go with them are clearly defined, the licensing terms are not quite as obvious. Apparently, developers have to upgrade their licenses based on the revenue they generate with the app. Still, not a bad way to get started cheaply and then pay more as you have more revenue.

Getting Started

Getting Started

Getting Started

Download the free beta (Windows only for now) to start bringing your ideas to life. Create a new project and depending upon the complexity of the game you are going for, choose the location for saving the project.

Creating a New Project

Creating a New Project

The empty user interface might not very inspiring at first, but it is easy to get going. Since games tend to have a core theme and multiple levels, I went ahead to create a Super Mario type game where a bird has to jump from one block to another before it can get on the tree. If it falls from the block, you lose a life and have to start all over again.

Adding Game Elements

Adding a Background and Game Elements

Adding a Background and Game Elements

The first step is adding game elements (sprites) and just start dragging and dropping images into the canvas. I dropped in a background image and a couple of blocks.

The Game is Set

The Game is Set

It’s amazing how well the images dropped into the background merge together. See how nicely the bird is sitting atop the block! Since the background was a bit distracting, I removed it to highlight other elements.

Editing Behaviours

Editing Behaviours

Once you have added the elements to the canvas, you will have to alter their properties appropriately. For example, our gameplay requires the blocks to be static and the bird to move around. Hit Edit Behaviour and add as many behaviours to the sprite as needed. For the purpose of this game, the I chose the Solid behavior for the blocks.

Editing the Bird's Behaviour

Editing the Bird's Behaviour

In the case of the bird, I went with the Platform behaviour, designed exclusively for games like ours. Brilliant thinking!

The Game in the Browser

The Game in the Browser

You can save the game and even try if it’s working upto this point using Run Layout. The game will open in the default browser and will respond to your keyboard inputs.

Adding Events

Adding Events

Adding Events

Now that basics have been set up, it’s time to add more effects to the game to make it complete. Events define what happens when something occurs in the gameplay.

Adding Actions

Adding Actions

For instance, in one event, the point should go up when the bird lands on the block and in another event, a life is deducted when it doesn’t. You can select objects and define events from the Events Sheet tab.

Multiple Events

Multiple Events

If necessary, you can add actions to each event. Events and actions play a major role in making the game immersive and fun to play with.

Final Thoughts

Hands down, Scirra is a powerful yet easy-as-pie game maker. The game editor is intuitive and is quick to learn. Usually when there is an app that helps you create something without requiring you to write even a single line of code, it might produce a limited version of the original idea that you had in mind.

But that’s not the case with Scirra. You can create your own casual game up and running in minutes. HTML5 is the future of the web and Construct 2 future-proofs your games to run in any modern browser. Do give this cool app a try before shelling out big bucks on costly software or hiring expensive developers! Perhaps you can now create your own amazing game in HTML5 that you would have never dreamed possible before.

Share Your Thoughts!

Now that there are no barriers, will you be venturing to create your own game? Are there better and powerful game creators like Scirra in the market?


  • http://www.supersixtwo.com Troy Peterson

    This is an awesome idea! Now, if they could only make it for OSX, I would buy it in a second.

  • bkr

    Scirra is really good but there are more powerful choices like (game maker) which supports HTML it has been there for along time and it has great community and there is (Stencyl) which is relatively new and doesn’t support HTML YET but supports flash and you have your (multimedia fusion) which is really good

  • http://www.whizkraft.com/ whizkraft

    It’s really good idea, new and unique concept.

theatre-aglow
theatre-aglow
theatre-aglow
theatre-aglow