Act Responsively.

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…

HTML5 Bitcoin Wallet

HTML5 Bitcoin Wallet

I think Apple is starting to have a love-hate relationship with HTML5. When Apple bans an app in the App store or gets greedy, developers seem to always turn to HTML5. Do you remember the time Apple started requiring third-party app developers to sell any available content inside their apps instead of linking out to browser based items on a website? Apple wanted their 30 percent and a HTML5 Instant Reader was born. Well now Apple is having issues with bitcoin wallet apps. High-profile bitcoin wallet providers such as Coinbase and Blockchain have seen their apps removed from the App store. It was only in the past couple of days that Apple approved the bitWallet iOS App which without workarounds is almost useless because the bitcoin sending function is blocked. It’s kind of like having a traditional wallet full of cash that was glued together by your little brother. Sure, you can get the money out eventually but it will require some time and a speech to your brother about how glueing a strangers wallet together may result in a wedgie.

There is a HTML5 bitcoin wallet app outside of Apple’s sphere of influence called Coinpunk. It is an open source bitcoin wallet service that you can run on your own server. The user interface is entirely written in HTML with JavaScript and the backend is built with Node.js. The code is written to provide future support for more bitcoin node clients, including upcoming SPV-based wallets that require less resources to work. You can also accept payments via a QR code, do QR code scanning, and enjoy two-factor authentication.

Watch this HTML5 bitcoin wallet app being used to buy a Subway sandwich in Allentown, Pennsylvania.

Coinpunk is trying to raise funds to further the project on Indiegogo, an international crowdfunding platform. There are less than 48 hours to go on the campaign. They say they want to “prove that you can make 100% open source HTML5/JS bitcoin wallets that work just as well as proprietary native ones, if not better.”

I do not own any bitcoin and that makes me sad. I want start though and have created a bitcoin wallet where you can send me bitcoins: 19BxpcYMh44PXbR3ZDv7UcffasKnk1MHn3

Why would you send me bitcoins?

  • Support the HTML5 Blog
  • Advertise. If you send me 1 bitcoin or more you can advertise on this site for 3 months. It will be a 125×125 ad in the right sidebar. Just e-mail me the transaction id and ad details at stanbyme@html5blog.com, and I’ll set it up for you.
  • So that my lame HTML5 Halloween costume will look better this year.

Here is the QR code for my bitcoin wallet:

QR Code for HTML5 Blog

Thank you!