Instant HTML5 2D Platformer

Aidan Temple

• Publisher: Packt Publishing
• Year: 2013
• eBook ISBN: 9781849696784
• Edition: 1
• Topic: Computer Science
• Subtopic: Programming Games
• Index: Computer Science

In Detail

Game development has traditionally only been accessible to those with experience in computer science and access to the best or most expensive development tools. However, with the advent of technologies such as HTML5 and the ability to self-publish, web-based games such as those on Facebook and smartphones are becoming more attractive to develop than ever before. Through the use of open technologies such as HTML5, anyone with even a basic understanding of games development can begin to develop video games in their spare time and publish them to the Web or as an application for mobile devices.

Instant HTML5 2D Platformer is a practical, hands-on guide that provides you with a number of clear, step-by-step, task-based exercises, which are used to discuss game development and put into practice development techniques through the use of HTML5 and JavaScript. This book looks at the creation of a 2D platform-based game using the HTML5 canvas element.

Instant HTML5 2D Platformer introduces you to HTML5 canvas through a number of exercises, which show what the canvas is capable of. The book contains a number of clear, practical, hands-on tasks that incrementally build on the concepts of game creation and result in a 2D HTML5 platform-based game.

By undertaking the tasks within this book, you will learn how to develop your own 2D HTML5 game framework that you can use in the creation of your own video games, not just the game developed within this book. Alongside this framework you will learn how to develop and understand 2D animation, game logic, and how to handle user input devices.

Approach

Filled with practical, step-by-step instructions and clear explanations for the most important and useful tasks. The step-by-step approach taken by this book will show you how to develop a 2D HTML5 platformer-based game that you will be able to publish to multiple devices.

Who this book is for

This book is great for anyone who has an interest in HTML5 games development, and who already has a basic to intermediate grasp on both the HTML markup and JavaScript programming languages. Therefore, due to this requirement, the book will not discuss the inner workings of either of these languages but will instead attempt to describe the functionality of the code present within this book.

Instant HTML5 2D Platformer

---

Instant HTML5 2D Platformer

Copyright © 2013 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

First published: August 2013

Production Reference: 1230813

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham B3 2PB, UK.

ISBN 978-1-84969-678-4

www.packtpub.com

Credits

Author

Aidan Temple

Reviewer

Ray Hammond

Acquisition Editor

Saleem Ahmed

Erol Staveley

Commissioning Editor

Priyanka S

Technical Editor

Sharvari H. Baet

Project Coordinator

Deenar Satam

Proofreader

Ting Baker

Production Coordinator

Prachali Bhiwandkar

Cover Work

Prachali Bhiwandkar

Cover Image

Disha Haria

About the Author

Aidan Temple is a software engineer and lead developer at Nanotek, an independent video game studio. He has recently graduated with honors from Glasgow Caledonian University where he studied BSc Computer Games Software Development.

During his time at university Aidan also undertook a research degree which outlined the possible benefits of implementing a GUI-based games framework by means of massively parallel processing through the utilization of Nvidia's CUDA architecture, which in turn successfully demonstrated the benefits of towards games development.. He also received one of the International Game Developers Associations most prestigious awards, an IGDA Scholarship which are awarded to exceptional students within the field of video games development.

Prior to his time at Glasgow Caledonian University, Aidan studied Computer Games Development at James Watt College of Further and Higher Education. Due to excellent understanding and demonstration of games development and design methodologies within a practical manner Aidan graduated from James Watt College with a distinction in his chosen field.

Without the help of my partner, Gemma, who kept me motivated and inspired, I would not have been able to undertake the work mentioned within this book.

Christina Donald for the art assets she created by giving up her spare time for the game, as well as those artists who offered their work for free on www.opengameart.org.

Without the help from Packt Publishing's staff, this book would not have been a reality. I would like to thank Priyanka Shah, Deenar Satam, and Sharvari Baet for helping to get the book off the ground.

I would also like to acknowledge each of the authors of various online articles as without their insight and knowledge in guiding me during development this book would not have been possible.

About the Reviewer

Ray Hammond is a software developer with over 15 years of experience in writing and reviewing code within the aviation industry. Ray has a passion for learning and runs a personal blog focusing on technologies such as HTML5, JavaScript, Linux, and security.

www.PacktPub.com

Support files, eBooks, discount offers and more

You might want to visit www.PacktPub.com for support files and downloads related to your book.

Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at <[email protected]> for more details.

At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks.

http://PacktLib.PacktPub.com

Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book library. Here, you can access, read and search across Packt's entire library of books.

Why subscribe?

• Fully searchable across every book published by Packt
• Copy and paste, print and bookmark content
• On demand and accessible via web browser

Free access for Packt account holders

If you have an account with Packt at www.PacktPub.com, you can use this to access PacktLib today and view nine entirely free books. Simply use your login credentials for immediate access.

Preface

To begin with, the book will guide you through an introduction of the HTML5 canvas and some of the functionality that it provides to web and games developers. With an understanding of the HTML5 canvas, the book then gears its attention towards the creation of the 2D platform game in question by guiding you through the steps required to implement a basic game framework for any 2D HTML5 game.

The book will then progress iteratively through a number of components you might find within a 2D platform-based game. These components include monitoring and updating user input through means of a keyboard. Also covered are implementing a parallax background, adding enemies, and collectible items similar to the concept behind the coins in Mario and gold rings in Sonic. We will also look at implementing a basic form of physics, which will be used to allow the player to jump as well as introducing sound effects to the game to enhance its appeal.

What this book covers

Setting up your HTML5 canvas (Should know) gives an overview of how to set up the HTML5 canvas as well as some of the basic functionality the canvas has to offer and how we would go about implementing that functionality.

Implementing the game framework (Should know) is a step-by-step guide to the creation of a basic 2D game framework that takes advantage of polymorphism and which will be incrementally improved in each of the recipe. This framework will be responsible for updating and rendering game objects.

Creating the player (Must know) will look at the steps taken to implement a player class that will fit seamlessly with our game framework in order to load and draw the necessary assets to the canvas.

Handling user input (Must know) will improve upon the game framework introduced in an earlier task as well as enhance our player class to respond to the user's input. By responding to the user's input, we can move our player freely around the canvas.

Animating the player (Must know) will introduce an animation manager, which will allow us to load and render sprite sheet animations. We will also adjust the player class to take advantage of the animation manager so that we can animate the player.

Creating the level (Must know) will introduce...

Table of contents

• Instant HTML5 2D Platformer