Skip to content

Commit

Permalink
added support for animation groups
Browse files Browse the repository at this point in the history
  • Loading branch information
@ssatguru
ssatguru committed Dec 29, 2019
1 parent 588bada commit 3feb1ea
Show file tree
Hide file tree
Showing 17 changed files with 8,726 additions and 6,525 deletions.
101 changes: 81 additions & 20 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,13 +71,25 @@ See below for more details.
<script src="CharacterController.js"></script>
```

See INSTALL below to find where you can get "CharacterController.js".
See INSTALL below to find where you can get "CharacterController.js".

2. a small javascript code snippet to get you up and running
2. if your mesh rotation is in quaternion then switch to euler.
NOTE: The GLTF/GLB files have rotation in quaternion
```
// character controller needs rotation in euler.
// if your mesh has rotation in quaternion then convert that to euler.
player.rotation = player.rotationQuaternion.toEulerAngles();
player.rotationQuaternion = null;
```

3. instantiate charcater controller and start it.

```
//------------------Character Controller -------------------------------------------------
var cc = new CharacterController(player,camera,scene);
//fourth parm agMap is optional and is used when animation groups rather than animation ranges
//are used.
var cc = new CharacterController(player,camera,scene,agMap);
cc.start();
```

Expand Down Expand Up @@ -174,22 +186,47 @@ Global Module

```
// JavaScript
// if using animation ranges
var cc = new CharacterController(player,camera,scene);
// if using animation groups
var cc = new CharacterController(player,camera,scene,agMap);
//agMap is a Map of animation name to animationGroup
```

```
// TypeScript
import {CharacterController} from "babylonjs-charactercontroller";
// if using animation ranges
let cc = new CharacterController(player,camera,scene);
// if using animation groups
var cc = new CharacterController(player,camera,scene,agMap);
```

Takes three parms
Takes four parms

- player - the player mesh containing a skeleton with appropriate animations listed below
- camera - arc rotate camera
- scene - scene

The player skeleton is expected to have the following animation ranges
- agMap - This is optional and only needed if using animation groups instead of animation ranges.
It is a Map of animation name to animationGroup
In this Map the key would be the character controller animation name and
the key value would be the animationGroup.
example:
```
let myWalkAnimationGroup:AnimationGroup = ...;
let agMap:{} = {
"walk":myWalkAnimationGroup,
"run": ...,
}
```

If using animation ranges the player skeleton is expected to have the following animation ranges named as follows

- idle
- idleJump
Expand All @@ -206,40 +243,53 @@ The player skeleton is expected to have the following animation ranges

If your animation range is named differently from those mentioned above then use the setWalkAnim(..),setWalkBackAnim(..) etc API to specify your animation range name.

NOTE :
If your mesh rotation is in quaternion then switch to euler before creating character controller.
The GLTF/GLB files have rotation in quaternion.

```
player.rotation = player.rotationQuaternion.toEulerAngles();
player.rotationQuaternion = null;
```

#### To start/stop controller

```
cc.start();
cc.stop();
```

#### To change animation range name or other parameters
#### To change animation range name / animation group and their parameters
rangeName can be the name of your animation range corresponding to the character controller animation
or it could be the animation group corresponding to the character controller animation

```
cc.setIdleAnim(rangeName: string,rate: number,loop: boolean);
cc.setIdleAnim(rangeName: string|AnimationGroup ,rate: number,loop: boolean);
cc.setIdleJumpAnim(rangeName: string,rate: number,loop: boolean);
cc.setWalkAnim(name :string, playback rate:number,loop:boolean);
cc.setWalkAnim(name :string|AnimationGroup , playback rate:number,loop:boolean);
cc.setWalkBackAnim(name :string, playback rate:number,loop:boolean);
cc.setRunAnim(name :string, playback rate:number,loop:boolean);
cc.setRunAnim(name :string|AnimationGroup , playback rate:number,loop:boolean);
cc.setRunJumpAnim(rangeName: string,rate: number,loop: boolean)
cc.setFallAnim(name :string, playback rate:number,loop:boolean);
cc.setFallAnim(name :string|AnimationGroup , playback rate:number,loop:boolean);
cc.setTurnRightAnim(name :string, playback rate:number,loop:boolean);
cc.setTurnLeftAnim(name :string, playback rate:number,loop:boolean);
cc.setTurnRightAnim(name :string|AnimationGroup , playback rate:number,loop:boolean);
cc.setTurnLeftAnim(name :string|AnimationGroup , playback rate:number,loop:boolean);
cc.setStrafeRightAnim(name :string, playback rate:number,loop:boolean);
cc.setStrafeLeftAnim(name :string, playback rate:number,loop:boolean);
cc.setStrafeRightAnim(name :string|AnimationGroup , playback rate:number,loop:boolean);
cc.setStrafeLeftAnim(name :string|AnimationGroup , playback rate:number,loop:boolean);
cc.setSlideBackAnim(name :string, playback rate:number,loop:boolean);
cc.setSlideBackAnim(name :string|AnimationGroup , playback rate:number,loop:boolean);
```

So lets say your walk animation is called "myWalk" and you want to play it at half speed and loop it continuoulsy then

```
cc.setWalkAnim("myWalk",0.5,true);
//if you donot want to change the name or the rate the use below instead
cc.setWalkAnim(null,null,true);
```

#### To change key binding
Expand Down Expand Up @@ -363,7 +413,18 @@ setNoFirstPerson(true);
If not already installed, install node js.
Switch to the project folder.
Run "npm install", once, to install all the dependencies.
To build anytime
Run "npm build" - this will both compile, minify and store the build in "dist" folder.
Use the "index.html" in "tst" folder to test your changes.
example : start a http server from root folder and then goto http://localhost:8080/tst
### To build
Run "npm build"
This will both compile, minify and store the build in "dist" folder.
### To test
1) start the development server
"npm run dev"
This will start the live dev server on port 8080.
This will live compile your code any time you make changes and make your library available at
http://localhost:8080

2) start another http server from the project root folder say on port 8181.
goto http://localhost:8181/tst
to serve the index.html file for testing.
The test html files pulls the library from http://localhost:8080 as shown in previous step.

47 changes: 27 additions & 20 deletions dist/CharacterController.d.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Skeleton, ArcRotateCamera, Vector3, Mesh, Scene, Ray } from "babylonjs";
import { Skeleton, ArcRotateCamera, Vector3, Mesh, Scene, Ray, AnimationGroup } from "babylonjs";
export declare class CharacterController {
private avatar;
private skeleton;
Expand Down Expand Up @@ -59,19 +59,23 @@ export declare class CharacterController {
setLeftSpeed(n: number): void;
setRightSpeed(n: number): void;
setGravity(n: number): void;
setAnim(anim: AnimData, rangeName: string, rate: number, loop: boolean): void;
setWalkAnim(rangeName: string, rate: number, loop: boolean): void;
setRunAnim(rangeName: string, rate: number, loop: boolean): void;
setWalkBackAnim(rangeName: string, rate: number, loop: boolean): void;
setSlideBackAnim(rangeName: string, rate: number, loop: boolean): void;
setIdleAnim(rangeName: string, rate: number, loop: boolean): void;
setTurnRightAnim(rangeName: string, rate: number, loop: boolean): void;
setTurnLeftAnim(rangeName: string, rate: number, loop: boolean): void;
setStrafeRightAnim(rangeName: string, rate: number, loop: boolean): void;
setSrafeLeftAnim(rangeName: string, rate: number, loop: boolean): void;
setIdleJumpAnim(rangeName: string, rate: number, loop: boolean): void;
setRunJumpAnim(rangeName: string, rate: number, loop: boolean): void;
setFallAnim(rangeName: string, rate: number, loop: boolean): void;
setAnimationGroups(agMap: {}): void;
setAnimationRanges(arMap: {}): void;
private setAnim;
enableBlending(n: number): void;
disableBlending(): void;
setWalkAnim(rangeName: string | AnimationGroup, rate: number, loop: boolean): void;
setRunAnim(rangeName: string | AnimationGroup, rate: number, loop: boolean): void;
setWalkBackAnim(rangeName: string | AnimationGroup, rate: number, loop: boolean): void;
setSlideBackAnim(rangeName: string | AnimationGroup, rate: number, loop: boolean): void;
setIdleAnim(rangeName: string | AnimationGroup, rate: number, loop: boolean): void;
setTurnRightAnim(rangeName: string | AnimationGroup, rate: number, loop: boolean): void;
setTurnLeftAnim(rangeName: string | AnimationGroup, rate: number, loop: boolean): void;
setStrafeRightAnim(rangeName: string | AnimationGroup, rate: number, loop: boolean): void;
setSrafeLeftAnim(rangeName: string | AnimationGroup, rate: number, loop: boolean): void;
setIdleJumpAnim(rangeName: string | AnimationGroup, rate: number, loop: boolean): void;
setRunJumpAnim(rangeName: string | AnimationGroup, rate: number, loop: boolean): void;
setFallAnim(rangeName: string | AnimationGroup, rate: number, loop: boolean): void;
setWalkKey(key: string): void;
setWalkBackKey(key: string): void;
setTurnLeftKey(key: string): void;
Expand All @@ -91,12 +95,7 @@ export declare class CharacterController {
cameraCollisionChanged(): void;
setNoFirstPerson(b: boolean): void;
private checkAnims;
private key;
private renderer;
private handleKeyUp;
private handleKeyDown;
private _ellipsoid;
constructor(avatar: Mesh, camera: ArcRotateCamera, scene: Scene);
private checkAGs;
private started;
start(): void;
stop(): void;
Expand Down Expand Up @@ -140,11 +139,19 @@ export declare class CharacterController {
anyMovement(): boolean;
private onKeyDown;
private onKeyUp;
private key;
private renderer;
private handleKeyUp;
private handleKeyDown;
private _isAG;
private _hasAnims;
constructor(avatar: Mesh, camera: ArcRotateCamera, scene: Scene, agMap?: {});
}
export declare class AnimData {
name: string;
loop: boolean;
rate: number;
ag: AnimationGroup;
exist: boolean;
constructor(name: string);
}
Expand Down
Loading

0 comments on commit 3feb1ea

Please sign in to comment.