html5中的news,HTML5 Blog

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

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. Continue reading“Developing a street basketball game. Part I. Getting workflow ready.”