Christopher Pitt - Making Games: With JavaScript

Making Games: With JavaScript — 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 "Making Games: With JavaScript" 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:

↓

↑

Georgia Tahoma Arial Verdana

Reset

Interval:

↓

↑

Bookmark:

Make

1234567...15

Christopher Pitt 2016

Christopher Pitt Making Games 10.1007/978-1-4842-2493-9_1

1. Introduction

Christopher Pitt 1

(1)

Cape Town, Western Cape, South Africa

Electronic supplementary material

The online version of this chapter (doi: 10.1007/978-1-4842-2493-9_1 ) contains supplementary material, which is available to authorized users.

I'm a gamer. I've been a gamer since before I was a programmer. And yet Ive never tried to build a gameuntil now. A few weeks ago, a coworker sketched a simple, beautiful platform game. The moment I saw it; I knew I wanted to build it.

Knowing where to begin is always hard. Many books and tutorials about making games are often written in Java, C++, or some other language you havent learned yet. So the complexity of making games increases when you also need to learn new languages.

Instead, Im going to use modern JavaScript to make games for web browsers. Theyre effortless to use and they work everywhere. If youve ever wanted to make a game, join me. Well start with nothing and build fun games in no time at all.

If you have questions, feel free to ask me on Twitter: https://twitter.com/assertchris .

Christopher Pitt 2016

Christopher Pitt Making Games 10.1007/978-1-4842-2493-9_2

2. The Game Loop

Christopher Pitt 1

(1)

Cape Town, Western Cape, South Africa

Game loops are an essential part of every game. In this chapter, were going to set the stage for our game by creating a solid workflow and environment. Well see a few helpful libraries and render our first game character. This is gonna be fun!

Setting the stage for our game

Were going to build games using the latest JavaScript standards and language features. This is usually where Id show you how to create a JavaScript-built chain, but were going to do something different....

For this book, were going to do all of our coding in a hosted service called CodePen . It looks like the code in Figure .

Figure 2-1.

CodePen

There are a few benefits to this approach:

1. We dont need to cover JavaScript build chains. They are subjective, brittle, and distracting.
2. We can use SCSS (enhanced stylesheets) for free.
3. You dont have to set anything up to start interacting with the source code.

Were going to use a JavaScript library, called PixiJS ( www.pixijs.com ). Its a rendering library that will smooth over the browser inconsistencies. Its not a game engine or a physics engine, so were still going to learn and code those aspects ourselves. PixiJS will just allow us to get to those things sooner.

Were using PixiJS v4 . Its entirely possible that newer versions are available by the time you read this. The concepts should be universal, though the syntax might have changed.

We can add PixiJS to our CodePens by clicking on Settings JavaScript, and adding the following URL to the PixiJS CDN script: .

Figure 2-2.

Adding PixiJS to CodePen

Creating sprites

Sprites are a common name for visual objects in a game. We can move them around (though often they are responsible for moving themselves around) on the screen. We can interact with them.

Mario ( https://en.wikipedia.org/wiki/Mario ) is a sprite, the platforms he walks on are sprites, and the clouds in the background are sprites. Think of sprites as slices of a design file, which we paint over abstract data structures. Those abstract data structures have a position, and sometimes a velocity. Those abstract data structures are what we apply game rules to. They are our power-ups and enemies.

So how do we make them? Lets start by creating a small PNG image. Were using PNG because it allows us to make parts of the sprite texture transparent. You can also use JPEG images for your sprites if you want to.

Then we need to create a renderer, a stage, and a sprite:

const renderer = new PIXI.autoDetectRenderer(

window.innerWidth,

window.innerHeight,

{

"antialias": true,

"autoResize": true,

"transparent": true,

"resolution": 2,

},

)

document.body.appendChild(renderer.view)

const sprite = new PIXI.Sprite.fromImage(

"path/to/sprites/player-idle.png",

)

sprite.x = window.innerWidth / 2

sprite.y = window.innerHeight / 2

const stage = new PIXI.Container()

stage.addChild(sprite)

const animate = function() {

requestAnimationFrame(animate)

renderer.render(stage)

}

animate()

This is from http://codepen.io/assertchris/pen/qaobAz .

Ok, theres a lot going on here! Lets look at this code in steps:

1. We create a renderer. Renderers are what convert PixiJS abstractions (sprites, textures, etc.) into canvas or WebGL graphics. We dont have to interact with them, but we always have to have a renderer in order for our PixiJS stuff to show up.

   We tell the renderer to take up the full width and height of the browser window. We also tell it to anti-alias our graphics and bump them up to retina resolution. We tell it to have a transparent background, and to resize all graphics to fit on the screen.
2. Then we create a new instance of PIXI.Sprite , using the PNG image we created earlier. By default, it has a position of x = 0 and y = 0 . We can position it in the center of the screen instead.

   We have to create a root sprite container, often called a stage , and append the sprite to the stage. Its less complicated than it sounds. Think of HTML documents. They have a root html element, which we add all other elements to. This is the same kind of thing.
3. Finally, we create an animate function and make sure that the renderer renders our stage and sprite.

   Were using the requestAnimationFrame function as a way rendering without blocking the JavaScript thread. Theres a long discussion we could have about that. For now, its only important to know that requestAnimationFrame happens many times a second.

   The goal is for our game is to render between 30 and 60 frames per second, while doing all sorts of player and world calculations in the background. This is the function we need to use for that all to go smoothly.

The Game Loop

The game loop will control the flow of our game. Its a repetitive process of reading input, calculating changes in state, and rendering output to the screen.

So far weve set up a lot of scaffolding and all were doing is rendering a static image. Lets move it around a bit! To begin with, were going to create a Player class so we can track the position of the player:

class Player {

constructor(sprite, x, y) {

this.sprite = sprite

this.x = x

this.y = y

this.sprite.x = this.x

this.sprite.y = this.y

}

animate(state) {

this.x += 5

Next page

1234567...15

Light

Font size:

↓

↑

Georgia Tahoma Arial Verdana

Reset

Interval:

↓

↑

Bookmark:

Make

Similar books «Making Games: With JavaScript»

Look at similar books to Making Games: With JavaScript. 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.

Kelvin Sung

Build Your Own 2D Game Engine and Create Great Web Games: Using HTML5, JavaScript, and WebGL2

Spuy

Advanced Game Design with HTML5 and JavaScript

James Goodwill

Beginning Swift Games Development for iOS: Develop 2D and 3D games Using Apple’s SceneKit and SpriteKit, 2nd Edition

Rex van der Spuy [Rex van der Spuy]

The Advanced Game Developer’s Toolkit: Create Amazing Web-based Games with JavaScript and HTML5

Graeme Stuart [Graeme Stuart]

Introducing JavaScript Game Development : Build a 2D Game from the Ground Up

Rex van der Spuy [Rex van der Spuy]

Foundation Game Design with HTML5 and JavaScript

Emanuele Feronato [Emanuele Feronato]

Flash Game Development by Example

Egges

Building JavaScript games : for phones, tablets, and desktop

Davy Cielen

HTML5 Game Development with ImpactJS

Selim Arsever

jQuery game development essentials

Jesse Freeman

Introducing HTML5 Game Development

Will Goldstone

Unity 3.x Game Development Essentials

Discussion, reviews of the book Making Games: With JavaScript 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.