{"id":13671453,"url":"https://github.com/AlloyTeam/AlloyStick","last_synced_at":"2025-04-27T18:31:17.107Z","repository":{"id":13484873,"uuid":"16175224","full_name":"AlloyTeam/AlloyStick","owner":"AlloyTeam","description":"AlloyStick 骨骼动画引擎 - 腾讯 AlloyTeam","archived":false,"fork":false,"pushed_at":"2017-07-31T14:04:31.000Z","size":1437,"stargazers_count":438,"open_issues_count":6,"forks_count":92,"subscribers_count":82,"default_branch":"master","last_synced_at":"2024-11-11T09:43:43.404Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://alloyteam.github.io/AlloyStick","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AlloyTeam.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-01-23T14:47:39.000Z","updated_at":"2024-08-12T02:56:26.000Z","dependencies_parsed_at":"2022-08-07T07:15:24.357Z","dependency_job_id":null,"html_url":"https://github.com/AlloyTeam/AlloyStick","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlloyTeam%2FAlloyStick","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlloyTeam%2FAlloyStick/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlloyTeam%2FAlloyStick/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlloyTeam%2FAlloyStick/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AlloyTeam","download_url":"https://codeload.github.com/AlloyTeam/AlloyStick/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251187121,"owners_count":21549588,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-02T09:01:10.071Z","updated_at":"2025-04-27T18:31:16.801Z","avatar_url":"https://github.com/AlloyTeam.png","language":"JavaScript","funding_links":[],"categories":["3. 前端游戏框架","JavaScript"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n\u003cimg src=\"./logo.png\" style=\"width:150px\"/\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\nbeta 0.5.1\n\u003c/a\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n\u003ca href='http://alloyteam.github.io/AlloyStick'\u003e\nhttp://alloyteam.github.io/AlloyStick\n\u003c/a\u003e\n\u003c/p\u003e\n\n\u003e本项目近期在进行重构，因此变动会比较大，如果您有什么好的想法，欢迎在[这里](https://github.com/AlloyTeam/AlloyStick/issues)提出\n\u003emagic分支：正在开发的分支\n\n### CONTENT\n\n* [demo](https://github.com/AlloyTeam/AlloyStick#demo)  \n* [usage](https://github.com/AlloyTeam/AlloyStick#usage)\n* [API](https://github.com/AlloyTeam/AlloyStick#api)\n* [Licence](https://github.com/AlloyTeam/AlloyStick#licence)\n\n\n\n## Demo\n\nWe have a demo in this project, you can download the project and run `example/stickman/index.html` by yourself.\n\n## Usage\n\nWe only exposed two variables(classes) for the window. So all operations are based on these two classes:\n\n```\nwindow.AlloyStick\nwindow.AlloyUtils \n```\n\u003eattention: window.AlloyUtils may be removed soon\n\nHere is a suggested workflow to start your animation:\n\n#### 1.create a scene\n\nthe only parameter is the context for the canvas.\n\n```\nlet demoInstance = new window.AlloyStick({context:canvas.getContext('2d')});\n```\n\n#### 2.add an role\n\nA scene can has servel roles(objects), you can add roles one by one manually.\n\nthere are four parameters：\n\n* the config for the role\n* the initial action(**[{String}animationName,{Number}totalFrames,{Number}transitionFrames,{bool}isloop]** and the order of this array can not be changed)\n* the position of the Object(**[{Number}x,{Number}y]**)\n* Whether to call the easing function(In fact the easing function can be redefined by yourself in futher)\n\n```\ndemoInstance.addRole(\n        {\n            roleName:'xiaoxiao',\n            image:textureImg,\n            data:AlloyData,\n            fps:40\n        },\n        ['comeon',40,10,false],\n        {\n            x:250,\n            y:300\n        },\n        {\n            ifEase:true,\n        }\n    );\n```\n\n#### 3.bind events\n\nYou 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.\n\nThe second parameter means the action is called whether 'keydown' or 'keyup'.\n\nThe third parameter are some hook functions. There are four hooks totally:\n\n```\nbeforeKeyDown\nafterKeyDown\nbeforeKeyUp\nafterKeyUp\n```\n\n**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.\nBut 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. \n\nthe two modes can be used in different scenes.\n\nFinally the example:\n\n```\ndemoInstance.mapKeyToAni(\n        {\n            'j':{rules:[{role:'xiaoxiao',action:['simpleHit',12,5,false]},{role:'dada',action:['simpleHit',12,5,false]}]},\n            //others are omitted\n        },\n        'keydown',\n        {\n            beforeKeyDown:function(e){\n                let doms = document.getElementsByClassName('key_'+e.key);\n                for(let i = 0; i\u003cdoms.length; i++){\n                    AlloyUtils.addClass(doms[i],'pressdown');\n                }\n            },\n            afterKeyUp:function(e){\n                let doms = document.getElementsByClassName('key_'+e.key);\n                for(let i = 0; i\u003cdoms.length; i++){\n                    AlloyUtils.removeClass(doms[i],'pressdown');\n                }\n            }\n        },\n        'replace',\n    );\n```\n\n#### 4.start\n\nJust start the instance:\n\n```\ndemoInstance.start();\n```\n\nThis step is necessary, otherwise all actions can not be performed.\n\n## API\n\n### window.AlloyStick\n\n#### new AlloyStick(config) \n\n* arguments:\n\t* {Object} config\n* return: the instance of AlloyStick\n* example: \n\n```\nlet demoInstance = new window.AlloyStick({context:canvas.getContext('2d')});\n``` \n\n#### AlloyStick.addRole(roleConfig,initialAction,initialPosition,easeConfig)\n\n* arguments:\n\t* {Object} roleConfig\n\t* {Object} initialAction\n\t* {Object} initialPosition\n\t* {Object} easeConfig \n\t\t* default:`{ifEase:false}`\n\t\t* Optional\n* return: no return\n* usage: add role to this instance's scene(an instance of AlloyStick has only one scene)\n* example:\n\n```\ndemoInstance.addRole(\n        {\n            roleName:'xiaoxiao',\n            image:textureImg,\n            data:AlloyData,\n            fps:40\n        },\n        ['comeon',40,10,false],\n        {\n            x:250,\n            y:300\n        },\n        {\n            ifEase:true,\n        }\n    );\n```\n\n#### AlloyStick.roleNumbers()\n\n* arguments: no arguments\n* return: {Number}\n* usage: return the number of roles of this AlloyStick instance\n\n\n#### AlloyStick.setVector(roleName)\n\n* arguments:\n\t* {String} roleName\n\t\t* Optional  \n* return: no return\n* usage: change all the roles(when the roleName is undefined) or certain roles to the vector mode \n\n#### AlloyStick.removeVector(roleName)\n\n* arguments:\n\t* {String} roleName\n\t\t* Optional\n* return: no return\n* usage: change all the roles(when the roleName is undefined) or certain roles to the normal mode\n\n#### AlloyStick.showFPS(dom)\n\n* arguments:\n\t* {String|dom} dom\n\t\t* Optional\n* returns: no return\n* usage: show the fps monitor\n\n#### AlloyStick.hideFPS()  \n\n* arguments: no argument\n* return: no return\n* usage: hide the fps monitor\n\n#### AlloyStick.pause(obj)\n\n* arguments: \n\t* {Object} obj \n\t\t* Optional\n* return: no return\n* usage: pause or restart the whole scene(if obj is undefined or no roleName is defined in the obj) or the certain role\n\t* hint: when no 'value' property is specified in the obj, the pause means switch state, pause() twice means restart \n* example:\n\n```\ndemoInstance.pause({\n\t\tvalue:false /*means restart*/\n\t\troleName:\"xiaoxiao\"\n\t})\n```\n\t \n#### AlloyStick.clear()\n\n* arguments: no arguments\n* return: no return\n* usage: clear the whole scene of this instance\n\n#### AlloyStick.mapKeyToAni(lists,keyDownOrUp,callBacks,replaceOrWait = 'wait')\n\n* arguments: \n\t* {Object} lists\n\t* {'keydown'|'keyup'} keyDownOrUp\n\t* {Object} callBacks\n\t* {'wait'|'replace'} replaceOrWait\n\t\t* default: 'wait'\n\t\t* Optional \n* return: no return\n* usage: map the keyboard buttons to actions\n* example:\n\n```\ndemoInstance.mapKeyToAni(\n        {\n            'j':{rules:[{role:'xiaoxiao',action:['simpleHit',12,5,false]},{role:'dada',action:['simpleHit',12,5,false]}]},\n            //others are omitted\n        },\n        'keydown',\n        {\n            beforeKeyDown:function(e){\n                let doms = document.getElementsByClassName('key_'+e.key);\n                for(let i = 0; i\u003cdoms.length; i++){\n                    AlloyUtils.addClass(doms[i],'pressdown');\n                }\n            },\n            afterKeyUp:function(e){\n                let doms = document.getElementsByClassName('key_'+e.key);\n                for(let i = 0; i\u003cdoms.length; i++){\n                    AlloyUtils.removeClass(doms[i],'pressdown');\n                }\n            }\n        },\n        'replace',\n    );\n```\n\n\n#### AlloyStick.addRules(lists)\n\n* arguments:\n\t* {Object} lists \n* return: no return\n* usage: add the rules for mapping the keyboard buttons to actions\n\n#### AlloyStick.removeRules(key,role)\n\n* arguments:\n\t* {String} key\n\t* role\n\t\t* optional \n* return: no return\n* usage: add the rules for mapping the keyboard buttons to actions(if the parameter role is undefined, remove all the actions for the key, else remove the actions of the certain role for the key)\n\n\n#### AlloyStick.changeReplaceOrWait(replaceOrWait)\n* arguments: \n\t* {'wait'|'replace'} replaceOrWait\n* return: no return\n* usage: change the mode to 'wait' mode or 'replace' mode.\n\n#### AlloyStick.rolePlayTo(roleName,actionConfig)\n\n* arguments:\n    * {String}roleName\n    * {Array}actionConfig\n        * hint: [{String}animationName,{Number}totalFrames,{Number}transitionFrames,{bool}isloop]\n* return: no return\n* usage: Use js to call the action\n\n\n#### AlloyStick.start()\n\n* arguments: no argument\n* return: no return\n* usage: start this Instance\n\n\n \n## Licence\n\nThis content is released under the GPL License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAlloyTeam%2FAlloyStick","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FAlloyTeam%2FAlloyStick","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAlloyTeam%2FAlloyStick/lists"}