Act Responsively.

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

Read More…

Developing a street basketball game. Part ll: Throw a ball into a basket.

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

 Street Basketball Tutorial Part 2

This time we will talk about creating of basketball net (with physics), the way we will keep the ball, and throw it in different directions depending on mouse position. If you haven’t read a Part 1: Getting workflow ready, read it first, please. I describe there what to start with, how to create basic scene elements (ball, basket, wall and ground).

In this post I will try to describe in-game mechanics as much as possible and how all this things interact in Three.js and Ammo.js wrapped by Whitestorm.js framework. Without this framework there will be much more unnecessary code used. One more thing is softbody physics… in javascript… I have told you that we are going to create a net that will be shaked when it collides with the ball, not a scripted animation that happens when we score a goal, but a complete physics for net and ball collisions.

Two more files.

We compile this project using rollup.js, it means we can use es6 moduleswithout any restrictions. Let’s add two files that will handle: 1) Events, 2)Loops.

App JS Foler Structure

We’ll back to them soon, but let’s create a backboard and a basketball net first.

Backboard & basketball net

Backboard is just a WHS.Box with applied map, normalMap (defines how light will be casted on texture) and displacementMap. Backboard will be 41 x 28 and with depth of 1. We don’t want backboard to fall down, so it’s mass will be 0 as with wall and ground.  Read More…

Developing a street basketball game. Part I. Getting workflow ready.

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

Street Basketball Game Tutorial - Part 1

Some days ago I released a new version of WhitestormJS framework named r10 and decided to develop a game using almost all it’s functionality. (Just was curious how easy it would be). The task was to make a 3D game that requires complex 3D physics parts like concave objects and softbodies.

Setting up workflow

Before starting developing the game I added a couple of directories that I will use later: js, css, textures and img. Difference between textures and img folders is that textures folder will be used for images that will be used in 3D part of app and img is for images that are used in html, css and stuff like that.

Rollup

Useful thing when you need to work with es6 models in front-end, especially when you use most of es6 features and want them even on old browser versions. I used it with two plugins: babel for rollup and uglify for rollup to develop a cross-browser 3D app.

Bower
Some libraries are getting updates regularly (yep, like whitestorm.js). For them I need front-end package manager like bower (You can use npm too, but bower will be enough). For tweening I used GSAP library, because of it’s performance and also we need basket.js to keep such a large library as WhitestormJS in localStorage.

…And also i wrote a small bower plugin that will help me make preloading. Check it out there.

bower install whitestormjs gsap progress-loader basket.js

Okay, now seems to be ready…

My index.html file will be simple and will contain just loaded scripts and style.css for featured usage. Note that we don’t load whitestorm.js yet. We will add it then using basket.js.

app.js

As you already noticed, we have app.js included. So, let’s create an empty 3D world with enabled softbody physics(will be used later for a net), autoresize, filled background, camera position and aspect, + gravity:

Now we have a basic world that has 0xcccccc (grey) as it’s background color, gravity set as {x: 0, y: -200, z: 0} and camera that will be at same height as our basket. Also we start the app only after we have whitestorm.js loaded. Read More…