https://github.com/AlloyTeam/AlloyStick

AlloyStick 骨骼动画引擎 - 腾讯 AlloyTeam
https://github.com/AlloyTeam/AlloyStick

Last synced: about 1 month ago
JSON representation

AlloyStick 骨骼动画引擎 - 腾讯 AlloyTeam

• Host: GitHub
• URL: https://github.com/AlloyTeam/AlloyStick
• Owner: AlloyTeam
• Created: 2014-01-23T14:47:39.000Z (almost 11 years ago)
• Default Branch: master
• Last Pushed: 2017-07-31T14:04:31.000Z (over 7 years ago)
• Last Synced: 2024-08-03T09:09:50.625Z (4 months ago)
• Language: JavaScript
• Homepage: http://alloyteam.github.io/AlloyStick
• Size: 1.37 MB
• Stars: 437
• Watchers: 82
• Forks: 94
• Open Issues: 6
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-github-star - AlloyStick - 腾讯 AlloyTeam | AlloyTeam | 424 | (JavaScript)

README

        








beta 0.5.1







http://alloyteam.github.io/AlloyStick





>本项目近期在进行重构，因此变动会比较大，如果您有什么好的想法，欢迎在[这里](https://github.com/AlloyTeam/AlloyStick/issues)提出

>magic分支：正在开发的分支

### CONTENT

* [demo](https://github.com/AlloyTeam/AlloyStick#demo)  

* [usage](https://github.com/AlloyTeam/AlloyStick#usage)

* [API](https://github.com/AlloyTeam/AlloyStick#api)

* [Licence](https://github.com/AlloyTeam/AlloyStick#licence)

## Demo

We have a demo in this project, you can download the project and run `example/stickman/index.html` by yourself.

## Usage

We only exposed two variables(classes) for the window. So all operations are based on these two classes:

```

window.AlloyStick

window.AlloyUtils 

```

>attention: window.AlloyUtils may be removed soon

Here is a suggested workflow to start your animation:

#### 1.create a scene

the only parameter is the context for the canvas.

```

let demoInstance = new window.AlloyStick({context:canvas.getContext('2d')});

```

#### 2.add an role

A scene can has servel roles(objects), you can add roles one by one manually.

there are four parameters：

* the config for the role

* the initial action(**[{String}animationName,{Number}totalFrames,{Number}transitionFrames,{bool}isloop]** and the order of this array can not be changed)

* the position of the Object(**[{Number}x,{Number}y]**)

* Whether to call the easing function(In fact the easing function can be redefined by yourself in futher)

```

demoInstance.addRole(

        {

            roleName:'xiaoxiao',

            image:textureImg,

            data:AlloyData,

            fps:40

        },

        ['comeon',40,10,false],

        {

            x:250,

            y:300

        },

        {

            ifEase:true,

        }

    );

```

#### 3.bind events

You can call the actions by using function **rolePlayTo**, but the more convenient way is to bind a key to an event: when the user press down the certain key , an action should be called.

The second parameter means the action is called whether 'keydown' or 'keyup'.

The third parameter are some hook functions. There are four hooks totally:

```

beforeKeyDown

afterKeyDown

beforeKeyUp

afterKeyUp

```

**The forth parameter is important :** there are two modes for the animation: the wait mode and the replace mode. In the wait mode, all the triggerd animations will be in an array and acts one by one, pressing a keyboard button for many times quickly can cause the accumulation of animations.

But in the replaced mode, the animation being executed can not be interrupted, but there is at most one animation waiting, and there is no accumulation of animations. 

the two modes can be used in different scenes.

Finally the example:

```

demoInstance.mapKeyToAni(

        {

            'j':{rules:[{role:'xiaoxiao',action:['simpleHit',12,5,false]},{role:'dada',action:['simpleHit',12,5,false]}]},

            //others are omitted

        },

        'keydown',

        {

            beforeKeyDown:function(e){

                let doms = document.getElementsByClassName('key_'+e.key);

                for(let i = 0; i