TfeServer

Blog de tfe, Perl, Web et Libre...?

Game Creation: infinite maze

PubliƩ le 17/10/2016 dans threejs

Here is the article 10 about my series of posts about the game creation.

If you missed it, check out the previous part.

Blender Multiple Animations

It tooks me time, but i made a simple Pingu with Blender. The character has 2 animations:

  • When moving
  • When resting

The blender file is free and available in the Source.

Threejs Pingu Blender

To allow the character to use more than one animation, you need to use an animation mixer:

var mixer = new THREE.AnimationMixer( themesh );
var iddlingClip = thegeometry.animations[1];
var movingClip = thegeometry.animations[2];

var move_action = this.mixer.clipAction(movingClip, null ).setDuration(0.5);
var iddle_action = this.mixer.clipAction(iddlingClip, null ).setDuration(0.5);

Once the actions are loaded, you just need to update their effectiveWeight to 0/1 to enable/disable the state.

Infinite Maze Generation

To be able to detect when the player enter or leave the maze, i put a simple line in each door.

When the player cross a door, a collision between the mesh and the line is triggered.

Threejs Pingu Blender

Here is a youtube presentation of the state of the project:

You can get: the source code or View the demo directly.