Archive | blog

RSS feed for this section

Developing a street basketball game. Part lll: Level selecting and stats.

Creating a 3D browser game with physics in a few steps.

Street Basketball Tutorial Part 3

This is a final part of “Developing a street basketball game” trilogy. If you haven’t checked Part I: Getting workflow ready and Part ll: Throw a ball into a basket. — do it first.

Today I will tell you about making new levels, creating a level selecting menu and showing player stats (How good is he as street basketball player).

Filling init()

First, note that we added 2 new files to app.js: levelData.js and utils/textures.js.

levelData will return an array that contains level objects, that are javascript objects filled with config that differs from defaults.

utils/textures returns functions for generating textures from inputed data. It will be used to print stats and level items in level menu.

Second thing is that we add a raycaster variable. This thing is used to check if 3D vector generated from 2D mouse position intersects with other scene objects.

And in last 21 lines of init() function we added checking for app loading status. I won’t describe this part cause it is not related to main application and you will probably skip or rewrite this part in your app. Just keep in mind that we use event listeners here to do various things that will make impact on app preloader. 

Three sections. What will be

By the way, let’s define three game sections:

  • Main game. Player throws the ball until he score a goal.
  • Goal details. Player scored a goal and now he see it’s time, attempts and accuracy.
  • Level selecting menu. Player wants to choose another level or get back to current one.

Game Screens

initMenu();

Ratio

Let’s make a nice transition for camera, goal stats and game headline.

At first, we need to define a variable (ratio in code below) that will store relation between window width and window height. THREE.PerspectiveCamera already has two methods that will give us width and height values ->.getFilmWidth() and .getFilmHeight()

Note that APP.camera is a whitestorm.js wrapper for camera, to get it’s Three.js camera use APP.camera.getNative()

Headline text

Let’s add a headline of this game. For that we use WHS.Text. We need to generate a .js font file, I used typeface.js generator to do this. I named my file 1.js, you can name it as you want. Note that in font parameter we type font url, not a font name like in three.js

Continue Reading →

HTML5 Halloween Costume

HTML5 Halloween Costume

Halloween is less than 24 hours away and I needed a costume. My first idea was to dress up as Edward Snowden and wear a sign that says “Save iGoogle!”. Then, I would have had my wife dress up as Vladimir Putin and wear a sign that says “What’s iGoogle?”. We could have been the most topical couple at the Halloween party. The only problem was getting my wife to go along with it. Go figure.

My second Halloween costume idea is what you see in the pictures. I am a happy HTML5 pumpkin head man with an extremely tiny desk. That is not a double entendre. The HTML5 logo was handmade and took about the same time to make as the HTML5 chocolate cake. I liked the cake better. Everybody liked the cake better. Continue Reading →

I Hope You Use a Responsive WordPress Theme

Responsive WordPress Blog Theme

There is a major shift in the web taking place towards responsive design. I wouldn’t want you to be late to this swell party so I decided to do a series of posts on responsive web design. This is the first part in the series with the focus being responsive WordPress themes.

Regular visitors to the HTML5 Blog may have already noticed that the blog has been acting responsively for some time. I decided to go with a responsive WordPress theme for several reasons. The first and only reason that matters is because in 2012, responsive design is good design. Having to setup and maintain unique blog designs for users on mobile phones, users on tablets, and users on everything else is ridiculous. It makes me want to pull your hair out. Yes, your hair. Why would I pull out mine? It hurts when I do that.

Using a responsive WordPress theme has many benefits on a variety of levels including search engine optimization. Continue Reading →