• Complain

Jorge Palacios - Developing an HTML5 Brick-Breaker Game with Phaser

Here you can read online Jorge Palacios - Developing an HTML5 Brick-Breaker Game with Phaser full text of the book (entire story) in english for free. Download pdf and epub, get meaning, cover and reviews about this ebook. year: 2015, publisher: Jorge Palacios, genre: Home and family. Description of the work, (preface) as well as reviews are available. Best literature library LitArk.com created for fans of good reading and offers a wide selection of genres:

Romance novel Science fiction Adventure Detective Science History Home and family Prose Art Politics Computer Non-fiction Religion Business Children Humor

Choose a favorite category and find really read worthwhile books. Enjoy immersion in the world of imagination, feel the emotions of the characters or learn something new for yourself, make an fascinating discovery.

Jorge Palacios Developing an HTML5 Brick-Breaker Game with Phaser
  • Book:
    Developing an HTML5 Brick-Breaker Game with Phaser
  • Author:
  • Publisher:
    Jorge Palacios
  • Genre:
  • Year:
    2015
  • Rating:
    5 / 5
  • Favourites:
    Add to favourites
  • Your mark:
    • 100
    • 1
    • 2
    • 3
    • 4
    • 5

Developing an HTML5 Brick-Breaker Game with Phaser: summary, description and annotation

We offer to read an annotation, description, summary or preface (depends on what the author of the book "Developing an HTML5 Brick-Breaker Game with Phaser" wrote himself). If you haven't found the necessary information about the book — write in the comments, we will try to find it.

Learn how to create a complete HTML5 game based on brick-breaker mechanics using Phaser. It is the result of teaching game development at a local institute that focuses on learning by doing. The book is bundled with all the necessary assets and well-commented source code so you can get it right away.

Jorge Palacios: author's other books


Who wrote Developing an HTML5 Brick-Breaker Game with Phaser? Find out the surname, the name of the author of the book and a list of all author's works by series.

Developing an HTML5 Brick-Breaker Game with Phaser — read online for free the complete book (whole text) full work

Below is the text of the book, divided by pages. System saving the place of the last page read, allows you to conveniently read the book "Developing an HTML5 Brick-Breaker Game with Phaser" online for free, without having to search again every time where you left off. Put a bookmark, and you can go to the page where you finished reading at any time.

Light

Font size:

Reset

Interval:

Bookmark:

Make
Developing an HTML5 Brick-breaker Game With Phaser
Jorge Palacios
2015 Jorge Palacios

This book is dedicated to my parents, Betty and Elieser. They have given me the place and tools to develop my career as a computer scientist and game developer, leveraging some responsibilities so I could focus my efforts on the things that I love.

Theres also a special dedication to my mom. Shes always believed in me and my game-development goals despite the odds. I love you mom, thanks for the support and kind words during the storms.

Table of Contents
Introduction

Creating a Brick-breaker Game With Phaser is the result of teaching HTML5 game development by example at a local institute, focused on web technologies with a philosophy of teaching concepts, methodologies and standards in practical way.

This book is intended to be a hands-on introduction to HTML5 game development using the Phaser framework by developing a complete game with well-known mechanics. It is bundled with all the necessary assets, so we can focus on the code and not finding extra resources or developing programmer artwork.

What you will learn

By the end of the book, youll have learned to:

  • Set up an organized file structure for developing games for the web
  • Create a blank game and test everything runs OK
  • Import images and sounds
  • Show and move sprites on the screen
  • Manage a group of sprites
  • Play sound effects and background music
  • Show text on the screen with custom web fonts
  • Handle touch and keyboard input
  • Detect collisions and use the Arcade physics system
  • How to start using the particle system
  • Manage game states
  • Create a loading screen
  • Optimize the game for mobile devices

You can play a version of this game on , or running the

Target audience

It is aimed to programmers with some experience with JavaScript and want to learn by doing (and finishing). It is not a guide to JavaScript, but each step is explained and the source code is well-commented so you can get it right away and keep focusing on the big picture.

Development tools

The Phaser web site has a well-documented section on how to get started. However, I invite you to test and develop the code from this book using the Brackets editor. The code was developed and tested on it, and works well on Windows, Linux and Mac. Besides, testing the examples is far too easy:

  1. Install Brackets
  2. Make sure you have Chrome / Chromium browser installed
  3. In the menu bar, go to File -> Open Folder
  4. Locate a directory with an index.html file. For example: brick-breaker-phaser/01core_mechanics/01paddle/
  5. Select it
  6. In the menu bar, go to File -> Live Preview

There are other editors and tools, but the coding-testing pipeline on Brackets is very straightforward if youre new into web development.

Acknowledgements

The following people helped in the development of this book or the game associated with it:

  • Richard Davey - creator of Phaser
  • Christian Chomiak - edition and title page
  • Kenney - artwork and some sound effects
  • Joe Powell, courtesy of Freesound - background music (Electric Air)
  • Sergio Marin, and the whole team at Escuela Web, for giving me a place to unite two of my passions; game development and teaching
0 Project setup
Introduction

This chapter is focused on organizing our project to keep a tidy file structure. It will allow us to start good, and test the installation of Phaser. It is worth mentioning that well be using Phaser v2.3, available here for download.

0.1 File system
  1. Create the following file structure: an empty index.html file and four additional directories; css, img, js, and snd, respectively. As we can see, its a standard file structure for web development. As games grow, teams tend to specialize the file structure but right now its not our case:
    1game2|index.html3+---css4+---img5+---js6\---snd
  2. Add the phaser .js file in the js/ directory. Here we will store all of our scripting files:
    1+---js2|phaser.min.js
  3. Modify the index.html with the following code. This declares the type of document, its character encoding, includes the phaser in the html and creates a place for the game to be rendered:
    12lang="en">34charset="UTF-8">5 html5 Breaker game 6type="text/javascript" src="js/phaser.min.js">789
    id="phaser_game">
    1011
    • Create a file named main.js in the corresponding directory. This file will store the initialization code of our game:
      1// game's global variable2vargame;3// after everything is loaded, then4window.onload=function(){5// initialize the game object6game=newPhaser.Game(640,400,Phaser.AUTO,'phaser_game');7};
    • Now include the previous file into the html file with the proper tag. It must be included below the phaser include:
      1type="text/javascript" src="js/phaser.min.js">2type="text/javascript" src="js/main.js">
    • Finally, test the game by running it on the browser. If we open the browsers JavaScript console, we can read a message from the Phaser API stating that it is initialized and everything runs smoothly.
      Phaser output message 02 Empty game Now that we know how to set up an empty - photo 1

      Phaser output message

    • 0.2 Empty game

      Now that we know how to set up an empty Phaser project, I can tell you that inside the downloadable content there is a directory called 00empty_game with the previous code, plus all the images and sounds that we will use to properly build our game.

Next page
Light

Font size:

Reset

Interval:

Bookmark:

Make

Similar books «Developing an HTML5 Brick-Breaker Game with Phaser»

Look at similar books to Developing an HTML5 Brick-Breaker Game with Phaser. We have selected literature similar in name and meaning in the hope of providing readers with more options to find new, interesting, not yet read works.


Reviews about «Developing an HTML5 Brick-Breaker Game with Phaser»

Discussion, reviews of the book Developing an HTML5 Brick-Breaker Game with Phaser and just readers' own opinions. Leave your comments, write what you think about the work, its meaning or the main characters. Specify what exactly you liked and what you didn't like, and why you think so.