├── .gitignore ├── .vscode └── settings.json ├── Babylon-Demo.html ├── CocosCreator ├── CreaturePackDraw.js ├── CreaturePackDraw.js.meta ├── CreaturePackDrawAssembler.js ├── CreaturePackDrawAssembler.js.meta ├── CreaturePackMeta.js ├── CreaturePackMeta.js.meta ├── CreaturePackModule.js ├── CreaturePackModule.js.meta ├── CustomIA.fire ├── CustomIA.fire.meta ├── README.md ├── base64.js ├── base64.js.meta ├── cocos_creator1.png ├── cocos_creator2.png ├── fox2x.creature_pack ├── fox2x.creature_pack.meta ├── msgpack.js ├── msgpack.js.meta ├── resources.meta ├── resources │ ├── composer.png │ ├── composer.png.meta │ ├── composerMData.json │ ├── composerMData.json.meta │ ├── composerPack.txt │ ├── composerPack.txt.meta │ ├── fox.png │ ├── fox.png.meta │ ├── skinSwap.png │ ├── skinSwap.png.meta │ ├── skinSwap2x.creature_pack.txt │ ├── skinSwap2x.creature_pack.txt.meta │ ├── skinSwapMdata.json │ └── skinSwapMdata.json.meta ├── skinSwap2x.creature_pack ├── skinSwap2x.creature_pack.meta ├── test.fire └── test.fire.meta ├── Construct2 ├── README.md ├── creature2d │ ├── CreatureFlatData_generated.js │ ├── CreatureMeshBone.js │ ├── PluginIcon.ico │ ├── common.js │ ├── edittime.js │ ├── flatbuffers.js │ ├── gl-matrix.js │ └── runtime.js ├── demo │ └── test.capx ├── pic1.png └── pic2.png ├── CreatureBabylonRenderer.js ├── CreatureFlatData_generated.js ├── CreatureMeshBone.js ├── CreaturePackModule.js ├── CreaturePackPixiJSRefRenderer.js ├── CreaturePhaserPackRenderer.js ├── CreaturePhaserRenderer.js ├── CreaturePixiJSRefRenderer.js ├── CreaturePixiJSRenderer.js ├── CreaturePixiPackJSRenderer.js ├── CreatureThreeJSPackRenderer.js ├── CreatureThreeJSRenderer.js ├── LICENSE.md ├── Phaser3 ├── CreaturePackPhaser3Obj.js ├── Phaser3BasicGroup.html ├── Phaser3BasicSample.html ├── Phaser3Composer.html ├── Phaser3Flamingo.html ├── README.md └── title.png ├── Phasor-Demo.html ├── Phasor-Pack-Demo.html ├── PixiJSRef-Pack-Demo.html ├── PixiJs-Demo.html ├── PixiJs-SkinSwap-Demo.html ├── README.md ├── ThreeJS-Demo.html ├── ThreeJS-PackDemo.html ├── b64Encode.py ├── babylon.gui.min.js ├── babylon.js ├── babylonPack.png ├── babylonjs.png ├── bat.creature_pack ├── bat.png ├── composer.creature_pack ├── composer.png ├── flamingo.creature_pack ├── flamingo.png ├── flatbuffers.js ├── fox.png ├── fox0x.creature_pack ├── fox0x.json ├── fox2x.creature_pack ├── fox4x.creature_pack ├── gl-matrix.js ├── horseman.creature_pack ├── horseman.png ├── iceDemonExport_character_data.bytes ├── iceDemonExport_character_data.json ├── iceDemonExport_character_img.png ├── logo1.png ├── msgpack.js ├── packPlayer.png ├── phaser-2.js ├── phaser.js ├── pixi.dev.js ├── pixi.js ├── raptorNew.creature_pack ├── raptorNew.png ├── raptor_data.creature_pack ├── raptor_img.png ├── red_texture.png ├── require.js ├── skinSwap_character_data.json ├── skinSwap_character_data_meta.mdata ├── skinSwap_character_img.png ├── wasm ├── BabylonPack-Demo.html ├── CreaturePackBabylonWASMRenderer.js ├── CreaturePackManager.cpp ├── CreaturePackManager.h ├── CreaturePackModule.hpp ├── CreaturePackWASMPixiJSRenderer.js ├── CreaturePlayerWidget.js ├── CreaturePlayerWidgetTest.html ├── CreatureWASMUtils.js ├── Makefile ├── PixiJS-WASM-Pack-Demo.html ├── PixiJS-WASM-Pack-MultiDemo.html ├── README.md ├── creaturepack-wasm.html ├── creaturepack-wasm.js ├── creaturepack-wasm.wasm ├── mp.cpp └── mp.h └── webServerTest.py /.gitignore: -------------------------------------------------------------------------------- 1 | wasm/.vscode/settings.json 2 | wasm/creaturepack-wasm.wast 3 | *.o -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "files.associations": { 3 | "array": "cpp", 4 | "deque": "cpp", 5 | "unordered_map": "cpp", 6 | "vector": "cpp", 7 | "xstring": "cpp", 8 | "xutility": "cpp", 9 | "utility": "cpp", 10 | "initializer_list": "cpp", 11 | "list": "cpp", 12 | "xhash": "cpp", 13 | "algorithm": "cpp", 14 | "cmath": "cpp", 15 | "cstddef": "cpp", 16 | "cstdint": "cpp", 17 | "cstdio": "cpp", 18 | "cstdlib": "cpp", 19 | "cstring": "cpp", 20 | "cwchar": "cpp", 21 | "exception": "cpp", 22 | "functional": "cpp", 23 | "ios": "cpp", 24 | "iosfwd": "cpp", 25 | "iostream": "cpp", 26 | "istream": "cpp", 27 | "iterator": "cpp", 28 | "limits": "cpp", 29 | "memory": "cpp", 30 | "new": "cpp", 31 | "ostream": "cpp", 32 | "sstream": "cpp", 33 | "stack": "cpp", 34 | "stdexcept": "cpp", 35 | "streambuf": "cpp", 36 | "string": "cpp", 37 | "system_error": "cpp", 38 | "tuple": "cpp", 39 | "type_traits": "cpp", 40 | "typeinfo": "cpp", 41 | "xfacet": "cpp", 42 | "xfunctional": "cpp", 43 | "xiosbase": "cpp", 44 | "xlocale": "cpp", 45 | "xlocinfo": "cpp", 46 | "xlocnum": "cpp", 47 | "xmemory": "cpp", 48 | "xmemory0": "cpp", 49 | "xstddef": "cpp", 50 | "xtr1common": "cpp" 51 | } 52 | } -------------------------------------------------------------------------------- /Babylon-Demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Babylon - Basic scene 7 | 8 | 23 | 24 | 25 | 26 | 27 | 28 |

My First Web Page

29 | 30 |

My first paragraph.

31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 139 | 140 | 141 | -------------------------------------------------------------------------------- /CocosCreator/CreaturePackDraw.js.meta: -------------------------------------------------------------------------------- 1 | { 2 | "ver": "1.0.5", 3 | "uuid": "d1b9b3a8-82e6-4d39-b6a3-a66be0975eb8", 4 | "isPlugin": false, 5 | "loadPluginInWeb": true, 6 | "loadPluginInNative": true, 7 | "loadPluginInEditor": false, 8 | "subMetas": {} 9 | } -------------------------------------------------------------------------------- /CocosCreator/CreaturePackDrawAssembler.js: -------------------------------------------------------------------------------- 1 | let CreaturePackDraw = require('./CreaturePackDraw'); 2 | 3 | export default class CreatureAssembler extends cc.Assembler { 4 | updateRenderData (comp) { 5 | } 6 | 7 | fillBuffers (comp, renderer) { 8 | if(comp._ia == null) { 9 | return; 10 | } 11 | // first flush batched commands 12 | renderer._flush(); 13 | 14 | // update render states before flush 15 | renderer.material = comp._materials[0]; 16 | renderer.node = comp.node; 17 | renderer.cullingMask = comp.node._cullingMask; 18 | 19 | // flush ia directly 20 | if(comp._ia.count >= 4) { 21 | renderer._flushIA(comp._ia); 22 | } 23 | } 24 | } 25 | 26 | // register assembler to render component 27 | cc.Assembler.register(CreaturePackDraw, CreatureAssembler); 28 | module.exports = CreatureAssembler; -------------------------------------------------------------------------------- /CocosCreator/CreaturePackDrawAssembler.js.meta: -------------------------------------------------------------------------------- 1 | { 2 | "ver": "1.0.5", 3 | "uuid": "2c8b8f3f-0a0a-4ca8-aab5-6822300c0bff", 4 | "isPlugin": false, 5 | "loadPluginInWeb": true, 6 | "loadPluginInNative": true, 7 | "loadPluginInEditor": false, 8 | "subMetas": {} 9 | } -------------------------------------------------------------------------------- /CocosCreator/CreaturePackMeta.js: -------------------------------------------------------------------------------- 1 | // CreaturePackMetaData 2 | class CreaturePackMetaData 3 | { 4 | constructor() 5 | { 6 | this.clear(); 7 | } 8 | 9 | clear() 10 | { 11 | this.mesh_map = {}; 12 | this.mesh_sorted_names = []; 13 | this.skin_swaps = {}; 14 | this.active_skin_swap_names = new Set(); 15 | } 16 | 17 | getNumMeshIndices(name_in) 18 | { 19 | var cur_data = this.mesh_map[name_in]; 20 | return cur_data[1] - cur_data[0] + 1; 21 | } 22 | 23 | genSortedMeshNames(pack_player) 24 | { 25 | this.mesh_sorted_names = []; 26 | for(var i = 0; i < pack_player.data.meshRegionsList.length; i++) 27 | { 28 | var meshData = pack_player.data.meshRegionsList[i]; 29 | for(var meshKey in this.mesh_map) 30 | { 31 | if (this.mesh_map.hasOwnProperty(meshKey)) { 32 | var cmpMeshData = this.mesh_map[meshKey]; 33 | var cmpMinIdx = pack_player.data.points.length 34 | var cmpMaxIdx = 0; 35 | for(var k = cmpMeshData[0]; k <= cmpMeshData[1]; k++) 36 | { 37 | var cur_idx = pack_player.data.indices[k]; 38 | cmpMinIdx = Math.min(cmpMinIdx, cur_idx); 39 | cmpMaxIdx = Math.max(cmpMaxIdx, cur_idx); 40 | } 41 | 42 | if ((meshData[0] == cmpMinIdx) 43 | && (meshData[1] == cmpMaxIdx)) 44 | { 45 | this.mesh_sorted_names.push(meshKey); 46 | } 47 | } 48 | } 49 | } 50 | } 51 | 52 | buildSkinSwapIndices( 53 | swap_name, 54 | src_indices, 55 | pack_player 56 | ) 57 | { 58 | var skin_swap_indices = []; 59 | // Generate sorted names in mesh drawing order 60 | if (this.mesh_sorted_names.length == 0) 61 | { 62 | this.genSortedMeshNames(pack_player); 63 | } 64 | 65 | // Now Generate Skin Swap indices 66 | if (!(swap_name in this.skin_swaps)) 67 | { 68 | return skin_swap_indices; 69 | } 70 | 71 | var swap_set = this.skin_swaps[swap_name]; 72 | this.active_skin_swap_names = new Set(); 73 | var total_size = 0; 74 | for (var cur_data in this.mesh_map) 75 | { 76 | if(this.mesh_map.hasOwnProperty(cur_data)) 77 | { 78 | var cur_name = cur_data; 79 | if (swap_set.has(cur_name)) 80 | { 81 | total_size += this.getNumMeshIndices(cur_name); 82 | this.active_skin_swap_names.add(cur_name); 83 | } 84 | } 85 | } 86 | 87 | var offset = 0; 88 | for(var i = 0; i < this.mesh_sorted_names.length; i++) 89 | { 90 | var region_name = this.mesh_sorted_names[i]; 91 | if (swap_set.has(region_name)) 92 | { 93 | var num_indices = this.getNumMeshIndices(region_name); 94 | var cur_range = this.mesh_map[region_name]; 95 | for (var j = 0; j < this.getNumMeshIndices(region_name); j++) 96 | { 97 | var local_idx = cur_range[0] + j; 98 | skin_swap_indices.push(src_indices[local_idx]); 99 | } 100 | 101 | offset += num_indices; 102 | } 103 | } 104 | 105 | return skin_swap_indices; 106 | } 107 | } 108 | 109 | module.exports = { 110 | CreaturePackMetaData 111 | } -------------------------------------------------------------------------------- /CocosCreator/CreaturePackMeta.js.meta: -------------------------------------------------------------------------------- 1 | { 2 | "ver": "1.0.5", 3 | "uuid": "d2368cfa-ec7e-4230-9bc5-707351645a98", 4 | "isPlugin": false, 5 | "loadPluginInWeb": true, 6 | "loadPluginInNative": true, 7 | "loadPluginInEditor": false, 8 | "subMetas": {} 9 | } -------------------------------------------------------------------------------- /CocosCreator/CreaturePackModule.js.meta: -------------------------------------------------------------------------------- 1 | { 2 | "ver": "1.0.5", 3 | "uuid": "aba4b644-c760-4edb-82cb-dfc26f626cd3", 4 | "isPlugin": false, 5 | "loadPluginInWeb": true, 6 | "loadPluginInNative": false, 7 | "loadPluginInEditor": false, 8 | "subMetas": {} 9 | } -------------------------------------------------------------------------------- /CocosCreator/CustomIA.fire: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "__type__": "cc.SceneAsset", 4 | "_name": "", 5 | "_objFlags": 0, 6 | "_native": "", 7 | "scene": { 8 | "__id__": 1 9 | } 10 | }, 11 | { 12 | "__type__": "cc.Scene", 13 | "_objFlags": 0, 14 | "_parent": null, 15 | "_children": [ 16 | { 17 | "__id__": 2 18 | } 19 | ], 20 | "_active": true, 21 | "_level": 0, 22 | "_components": [], 23 | "_prefab": null, 24 | "_opacity": 255, 25 | "_color": { 26 | "__type__": "cc.Color", 27 | "r": 255, 28 | "g": 255, 29 | "b": 255, 30 | "a": 255 31 | }, 32 | "_contentSize": { 33 | "__type__": "cc.Size", 34 | "width": 0, 35 | "height": 0 36 | }, 37 | "_anchorPoint": { 38 | "__type__": "cc.Vec2", 39 | "x": 0, 40 | "y": 0 41 | }, 42 | "_scale": { 43 | "__type__": "cc.Vec3", 44 | "x": 0.5697916666666667, 45 | "y": 0.5697916666666667, 46 | "z": 1 47 | }, 48 | "_quat": { 49 | "__type__": "cc.Quat", 50 | "x": 0, 51 | "y": 0, 52 | "z": 0, 53 | "w": 1 54 | }, 55 | "_zIndex": 0, 56 | "groupIndex": 0, 57 | "autoReleaseAssets": false, 58 | "_id": "52af9cc0-8d7d-481b-a67f-6d8692d6db82" 59 | }, 60 | { 61 | "__type__": "cc.Node", 62 | "_name": "Canvas", 63 | "_objFlags": 0, 64 | "_parent": { 65 | "__id__": 1 66 | }, 67 | "_children": [ 68 | { 69 | "__id__": 3 70 | }, 71 | { 72 | "__id__": 5 73 | }, 74 | { 75 | "__id__": 7 76 | } 77 | ], 78 | "_active": true, 79 | "_level": 0, 80 | "_components": [ 81 | { 82 | "__id__": 9 83 | } 84 | ], 85 | "_prefab": null, 86 | "_opacity": 255, 87 | "_color": { 88 | "__type__": "cc.Color", 89 | "r": 255, 90 | "g": 255, 91 | "b": 255, 92 | "a": 255 93 | }, 94 | "_contentSize": { 95 | "__type__": "cc.Size", 96 | "width": 960, 97 | "height": 640 98 | }, 99 | "_anchorPoint": { 100 | "__type__": "cc.Vec2", 101 | "x": 0.5, 102 | "y": 0.5 103 | }, 104 | "_position": { 105 | "__type__": "cc.Vec3", 106 | "x": 480, 107 | "y": 320, 108 | "z": 0 109 | }, 110 | "_scale": { 111 | "__type__": "cc.Vec3", 112 | "x": 1, 113 | "y": 1, 114 | "z": 1 115 | }, 116 | "_rotationX": 0, 117 | "_rotationY": 0, 118 | "_quat": { 119 | "__type__": "cc.Quat", 120 | "x": 0, 121 | "y": 0, 122 | "z": 0, 123 | "w": 1 124 | }, 125 | "_skewX": 0, 126 | "_skewY": 0, 127 | "_zIndex": 0, 128 | "groupIndex": 0, 129 | "_id": "a8/ETQ1vpCxLWXMeXTk0mq" 130 | }, 131 | { 132 | "__type__": "cc.Node", 133 | "_name": "Main Camera", 134 | "_objFlags": 0, 135 | "_parent": { 136 | "__id__": 2 137 | }, 138 | "_children": [], 139 | "_active": true, 140 | "_level": 1, 141 | "_components": [ 142 | { 143 | "__id__": 4 144 | } 145 | ], 146 | "_prefab": null, 147 | "_opacity": 255, 148 | "_color": { 149 | "__type__": "cc.Color", 150 | "r": 255, 151 | "g": 255, 152 | "b": 255, 153 | "a": 255 154 | }, 155 | "_contentSize": { 156 | "__type__": "cc.Size", 157 | "width": 0, 158 | "height": 0 159 | }, 160 | "_anchorPoint": { 161 | "__type__": "cc.Vec2", 162 | "x": 0.5, 163 | "y": 0.5 164 | }, 165 | "_position": { 166 | "__type__": "cc.Vec3", 167 | "x": 0, 168 | "y": 0, 169 | "z": 0 170 | }, 171 | "_scale": { 172 | "__type__": "cc.Vec3", 173 | "x": 1, 174 | "y": 1, 175 | "z": 1 176 | }, 177 | "_rotationX": 0, 178 | "_rotationY": 0, 179 | "_quat": { 180 | "__type__": "cc.Quat", 181 | "x": 0, 182 | "y": 0, 183 | "z": 0, 184 | "w": 1 185 | }, 186 | "_skewX": 0, 187 | "_skewY": 0, 188 | "_zIndex": 0, 189 | "groupIndex": 0, 190 | "_id": "70ywCnvBpBC5DTvGoXwPq0" 191 | }, 192 | { 193 | "__type__": "cc.Camera", 194 | "_name": "", 195 | "_objFlags": 0, 196 | "node": { 197 | "__id__": 3 198 | }, 199 | "_enabled": true, 200 | "_cullingMask": 4294967295, 201 | "_clearFlags": 7, 202 | "_backgroundColor": { 203 | "__type__": "cc.Color", 204 | "r": 0, 205 | "g": 0, 206 | "b": 0, 207 | "a": 255 208 | }, 209 | "_depth": -1, 210 | "_zoomRatio": 1, 211 | "_targetTexture": null, 212 | "_id": "9crh7mEgJN1pV+zo9xoDMp" 213 | }, 214 | { 215 | "__type__": "cc.Node", 216 | "_objFlags": 0, 217 | "_parent": { 218 | "__id__": 2 219 | }, 220 | "_id": "307Ly6t5BGwrs2JQ8WRpmc", 221 | "_prefab": { 222 | "__id__": 6 223 | }, 224 | "_name": "Background", 225 | "_active": true, 226 | "_position": { 227 | "__type__": "cc.Vec3", 228 | "x": 0, 229 | "y": 0, 230 | "z": 0 231 | }, 232 | "_rotationX": 0, 233 | "_rotationY": 0 234 | }, 235 | { 236 | "__type__": "cc.PrefabInfo", 237 | "root": { 238 | "__id__": 5 239 | }, 240 | "asset": { 241 | "__uuid__": "b8392351-be97-4f01-985e-3e7d2118f3c9" 242 | }, 243 | "fileId": "78fd70+ls5GgJcFkzvLSRk8", 244 | "sync": true 245 | }, 246 | { 247 | "__type__": "cc.Node", 248 | "_name": "ColorNode", 249 | "_objFlags": 0, 250 | "_parent": { 251 | "__id__": 2 252 | }, 253 | "_children": [], 254 | "_active": true, 255 | "_level": 0, 256 | "_components": [ 257 | { 258 | "__id__": 8 259 | } 260 | ], 261 | "_prefab": null, 262 | "_opacity": 255, 263 | "_color": { 264 | "__type__": "cc.Color", 265 | "r": 255, 266 | "g": 255, 267 | "b": 255, 268 | "a": 255 269 | }, 270 | "_contentSize": { 271 | "__type__": "cc.Size", 272 | "width": 200, 273 | "height": 200 274 | }, 275 | "_anchorPoint": { 276 | "__type__": "cc.Vec2", 277 | "x": 0.5, 278 | "y": 0.5 279 | }, 280 | "_position": { 281 | "__type__": "cc.Vec3", 282 | "x": 0, 283 | "y": 0, 284 | "z": 0 285 | }, 286 | "_scale": { 287 | "__type__": "cc.Vec3", 288 | "x": 1, 289 | "y": 1, 290 | "z": 1 291 | }, 292 | "_rotationX": 0, 293 | "_rotationY": 0, 294 | "_quat": { 295 | "__type__": "cc.Quat", 296 | "x": 0, 297 | "y": 0, 298 | "z": 0, 299 | "w": 1 300 | }, 301 | "_skewX": 0, 302 | "_skewY": 0, 303 | "_zIndex": 0, 304 | "groupIndex": 0, 305 | "_id": "a0uOn0C+BOj4Lq4PL6LGAU" 306 | }, 307 | { 308 | "__type__": "fba8045Ab5Jn4yj2EBO8nRt", 309 | "_name": "", 310 | "_objFlags": 0, 311 | "node": { 312 | "__id__": 7 313 | }, 314 | "_enabled": true, 315 | "_srcBlendFactor": 770, 316 | "_dstBlendFactor": 771, 317 | "blColor": { 318 | "__type__": "cc.Color", 319 | "r": 255, 320 | "g": 0, 321 | "b": 0, 322 | "a": 255 323 | }, 324 | "brColor": { 325 | "__type__": "cc.Color", 326 | "r": 0, 327 | "g": 0, 328 | "b": 255, 329 | "a": 255 330 | }, 331 | "tlColor": { 332 | "__type__": "cc.Color", 333 | "r": 0, 334 | "g": 255, 335 | "b": 0, 336 | "a": 255 337 | }, 338 | "trColor": { 339 | "__type__": "cc.Color", 340 | "r": 255, 341 | "g": 255, 342 | "b": 0, 343 | "a": 255 344 | }, 345 | "_id": "d48uAUC4RDb6wMBT1DjVNP" 346 | }, 347 | { 348 | "__type__": "cc.Canvas", 349 | "_name": "", 350 | "_objFlags": 0, 351 | "node": { 352 | "__id__": 2 353 | }, 354 | "_enabled": true, 355 | "_designResolution": { 356 | "__type__": "cc.Size", 357 | "width": 960, 358 | "height": 640 359 | }, 360 | "_fitWidth": false, 361 | "_fitHeight": true, 362 | "_id": "088WVR6eJIf7tYWrkXVyyz" 363 | } 364 | ] -------------------------------------------------------------------------------- /CocosCreator/CustomIA.fire.meta: -------------------------------------------------------------------------------- 1 | { 2 | "ver": "1.0.0", 3 | "uuid": "52af9cc0-8d7d-481b-a67f-6d8692d6db82", 4 | "asyncLoadAssets": false, 5 | "autoReleaseAssets": false, 6 | "subMetas": {} 7 | } -------------------------------------------------------------------------------- /CocosCreator/README.md: -------------------------------------------------------------------------------- 1 | # CreaturePack for Cocos Creator ( Creature 骨骼动画 Cocos Creator 和 微信小游戏 游戏引擎的支持) 2 | 3 | This folder contains files for running **CreaturePack** in **Cocos Creator**. This enables you to publish games with the **Creature Animation Tool** for the various HTML5 and Native Mobile platforms Cocos Creator supports. The CreaturePack plugin is also [**Wechat Mini Game Engine**](https://developers.weixin.qq.com/minigame/en/introduction/) ready. 4 | 5 | ![Alt text](https://raw.githubusercontent.com/kestrelm/Creature_WebGL/master/CocosCreator/cocos_creator1.png) 6 | 7 | A full writeup on the process can also be found [**here**](https://medium.com/@kestrelm/advanced-2d-skeletal-character-animation-for-the-wechat-mini-game-engine-with-cocos-creator-7a78c44d8cc8). 8 | 9 | ## Creature 骨骼动画教材/视频 10 | 11 | 这是为中国Creature用户提供的一些教材 ( MP4 文件格式 ): 12 | 13 | Creature 骨骼动画教程 | 人物呼吸动作 14 | https://pan.baidu.com/s/18tjGOv9Bk73ox3PKfifa3w 15 | 16 | Creature 骨骼动画教程 | 建立人脸 + 动画 17 | https://pan.baidu.com/s/1VK_PpelTmZR3B5OTHi7x0g 18 | 19 | Creature 骨骼动画教程 | 游戏引擎动画优化和压缩 20 | https://pan.baidu.com/s/1sYLSpVfOtzy31dmVNbOSAA 21 | 22 | Creature 骨骼动画教程 | 布料和头发 23 | https://pan.baidu.com/s/1-dYKVnUge351AY4EYoEn6g 24 | 25 | Creature 骨骼动画教程 | 附属动作 26 | https://pan.baidu.com/s/1hNl5IHnFvy8Sm1CGoCevzg 27 | 28 | Creature 骨骼动画教程 | 奔跑狐狸动画 29 | https://pan.baidu.com/s/1SXsgI1PSRu5dmJrB_hIADQ 30 | 31 | ## Overview 32 | 33 | This is a sample to show you how to load and run your CreaturePack characters in CocosCreator. 34 | 35 | ## Installation 36 | 37 | Please drag/copy all the **js** files in this repository into your Cocos Creator project. Make sure the relevant **meta** files are created for the plugin script files to be recognized by the system. Also make sure the character atlas image files as well as converted to text CreaturePack assets + MetaData files are in the **resources** folder of your project. 38 | 39 | ## Usage 40 | 41 | ### Convert your Creature Pack assets to b64 Text Encoding 42 | 43 | **This is very important!** Please either do this yourself or run the provided b64Encode.py in the main WebGL runtimes directory. 44 | 45 | ``Usage: python b64Encode.py `` 46 | 47 | So for example if you have a **Creature Pack** file asset called **myCharacter.creature_pack**, you will run: 48 | 49 | ``python b64Encode.py myCharacter.creature_pack myCharacter.creature_pack.txt`` 50 | 51 | You will need **python3** installed for the conversion script to run. Please make sure the converted file has the **.txt** extension so that Cocos Creator can recognize it. 52 | 53 | ### MetaData renamed to JSON extension 54 | 55 | To make your metaData recognizable by Cocos Creator, also rename your **MetaData** file to a file with a **.json** extension. 56 | 57 | ### Setup and Run 58 | 59 | Now go into Cocos Creator: 60 | 61 | ( First, make sure all your assets are in the resource folder of your game project ) 62 | 63 | 1. Create an Empty Node in your Cocos Creator scene 64 | 65 | 2. Drag this CreaturePackDraw as as component into your node 66 | 67 | ![Alt text](https://raw.githubusercontent.com/kestrelm/Creature_WebGL/master/CocosCreator/cocos_creator2.png) 68 | 69 | 3. Assign the CreaturePack b64 encoded text asset into the **Creature Pack Asset** slot 70 | 71 | 4. Assign your character atlas png file to the **Char Texture** slot 72 | 73 | 5. Optionally, assign the meta data ( please rename with a .json extension ) to the **Meta Data Asset** slot if you want SkinSwapping 74 | 75 | ## Scripting Details 76 | 77 | ### Controlling the character ( Animation Switching, Skin Swaps etc. ) 78 | 79 | **CreaturePackDraw.js** is the file that contains most of the important object handles to controlling your character. In particular, there is the following object in the main class: 80 | 81 | ``this._packRenderer`` 82 | 83 | This is a **creaturepack.CreatureHaxeBaseRenderer** which allows you to perform most animation game related operations on your character. 84 | 85 | ### Switching Animations 86 | 87 | To switch to an animation directly, call: 88 | 89 | ``this._packRenderer.setActiveAnimation("MyNewAnimation");`` 90 | 91 | To switch with blending, call: 92 | 93 | ``this._packRenderer.blendToAnimation("MyNewAnimation", blendDelta);`` 94 | 95 | where **blendDelta** is 0 < value < 1.0 . We recommend a value of 0.1 to get started. 96 | 97 | ### SkinSwap 98 | 99 | You can directly call **CreaturePackDraw**'s method: 100 | 101 | ``switchToSkin("MyNewSwap");`` 102 | 103 | to switch to a new available skinSwap. Take note you will need to have your metaData slot connected for skinSwapping to work. 104 | 105 | ### Changing Mesh Region Colors 106 | 107 | You can dynamically set and change mesh region colors via: 108 | 109 | ``setMeshColorOverride("MyMeshRegion", 0.5, 0, 0, 1.0);`` 110 | 111 | This will change your mesh region called **MyMeshRegion** with RGBA values of (0.5, 0, 0, 1.0). Take note the value ranges are from 0 to 1.0. 112 | 113 | ### Character Scaling Size Implmentation 114 | 115 | Pay attention to the **onLoad()** method where we load our characters into the game. You can alter how the character is scaled with respect to your width/height settings by taking a look at the charScale variable in **_updateVertexData()** and seeing how it is applied. 116 | 117 | ## Publishing CreaturePack for the Wechat Mini Game Platform 118 | 119 | This plugin is ready for the **Wechat Mini Game Platform**. Once setup, please follow the instructions outlined [here](https://docs.cocos2d-x.org/creator/manual/en/publish/publish-wechatgame.html) to publish for that platform. 120 | 121 | -------------------------------------------------------------------------------- /CocosCreator/base64.js: -------------------------------------------------------------------------------- 1 | /*! https://mths.be/base64 v0.1.0 by @mathias | MIT license */ 2 | ;(function(root) { 3 | 4 | // Detect free variables `exports`. 5 | var freeExports = typeof exports == 'object' && exports; 6 | 7 | // Detect free variable `module`. 8 | var freeModule = typeof module == 'object' && module && 9 | module.exports == freeExports && module; 10 | 11 | // Detect free variable `global`, from Node.js or Browserified code, and use 12 | // it as `root`. 13 | var freeGlobal = typeof global == 'object' && global; 14 | if (freeGlobal.global === freeGlobal || freeGlobal.window === freeGlobal) { 15 | root = freeGlobal; 16 | } 17 | 18 | /*--------------------------------------------------------------------------*/ 19 | 20 | var InvalidCharacterError = function(message) { 21 | this.message = message; 22 | }; 23 | InvalidCharacterError.prototype = new Error; 24 | InvalidCharacterError.prototype.name = 'InvalidCharacterError'; 25 | 26 | var error = function(message) { 27 | // Note: the error messages used throughout this file match those used by 28 | // the native `atob`/`btoa` implementation in Chromium. 29 | throw new InvalidCharacterError(message); 30 | }; 31 | 32 | var TABLE = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'; 33 | // http://whatwg.org/html/common-microsyntaxes.html#space-character 34 | var REGEX_SPACE_CHARACTERS = /[\t\n\f\r ]/g; 35 | 36 | // `decode` is designed to be fully compatible with `atob` as described in the 37 | // HTML Standard. http://whatwg.org/html/webappapis.html#dom-windowbase64-atob 38 | // The optimized base64-decoding algorithm used is based on @atk’s excellent 39 | // implementation. https://gist.github.com/atk/1020396 40 | var decode = function(input) { 41 | input = String(input) 42 | .replace(REGEX_SPACE_CHARACTERS, ''); 43 | var length = input.length; 44 | if (length % 4 == 0) { 45 | input = input.replace(/==?$/, ''); 46 | length = input.length; 47 | } 48 | if ( 49 | length % 4 == 1 || 50 | // http://whatwg.org/C#alphanumeric-ascii-characters 51 | /[^+a-zA-Z0-9/]/.test(input) 52 | ) { 53 | error( 54 | 'Invalid character: the string to be decoded is not correctly encoded.' 55 | ); 56 | } 57 | var bitCounter = 0; 58 | var bitStorage; 59 | var buffer; 60 | var output = ''; 61 | var position = -1; 62 | while (++position < length) { 63 | buffer = TABLE.indexOf(input.charAt(position)); 64 | bitStorage = bitCounter % 4 ? bitStorage * 64 + buffer : buffer; 65 | // Unless this is the first of a group of 4 characters… 66 | if (bitCounter++ % 4) { 67 | // …convert the first 8 bits to a single ASCII character. 68 | output += String.fromCharCode( 69 | 0xFF & bitStorage >> (-2 * bitCounter & 6) 70 | ); 71 | } 72 | } 73 | return output; 74 | }; 75 | 76 | // `encode` is designed to be fully compatible with `btoa` as described in the 77 | // HTML Standard: http://whatwg.org/html/webappapis.html#dom-windowbase64-btoa 78 | var encode = function(input) { 79 | input = String(input); 80 | if (/[^\0-\xFF]/.test(input)) { 81 | // Note: no need to special-case astral symbols here, as surrogates are 82 | // matched, and the input is supposed to only contain ASCII anyway. 83 | error( 84 | 'The string to be encoded contains characters outside of the ' + 85 | 'Latin1 range.' 86 | ); 87 | } 88 | var padding = input.length % 3; 89 | var output = ''; 90 | var position = -1; 91 | var a; 92 | var b; 93 | var c; 94 | var d; 95 | var buffer; 96 | // Make sure any padding is handled outside of the loop. 97 | var length = input.length - padding; 98 | 99 | while (++position < length) { 100 | // Read three bytes, i.e. 24 bits. 101 | a = input.charCodeAt(position) << 16; 102 | b = input.charCodeAt(++position) << 8; 103 | c = input.charCodeAt(++position); 104 | buffer = a + b + c; 105 | // Turn the 24 bits into four chunks of 6 bits each, and append the 106 | // matching character for each of them to the output. 107 | output += ( 108 | TABLE.charAt(buffer >> 18 & 0x3F) + 109 | TABLE.charAt(buffer >> 12 & 0x3F) + 110 | TABLE.charAt(buffer >> 6 & 0x3F) + 111 | TABLE.charAt(buffer & 0x3F) 112 | ); 113 | } 114 | 115 | if (padding == 2) { 116 | a = input.charCodeAt(position) << 8; 117 | b = input.charCodeAt(++position); 118 | buffer = a + b; 119 | output += ( 120 | TABLE.charAt(buffer >> 10) + 121 | TABLE.charAt((buffer >> 4) & 0x3F) + 122 | TABLE.charAt((buffer << 2) & 0x3F) + 123 | '=' 124 | ); 125 | } else if (padding == 1) { 126 | buffer = input.charCodeAt(position); 127 | output += ( 128 | TABLE.charAt(buffer >> 2) + 129 | TABLE.charAt((buffer << 4) & 0x3F) + 130 | '==' 131 | ); 132 | } 133 | 134 | return output; 135 | }; 136 | 137 | var base64 = { 138 | 'encode': encode, 139 | 'decode': decode, 140 | 'version': '0.1.0' 141 | }; 142 | 143 | // Some AMD build optimizers, like r.js, check for specific condition patterns 144 | // like the following: 145 | if ( 146 | typeof define == 'function' && 147 | typeof define.amd == 'object' && 148 | define.amd 149 | ) { 150 | define(function() { 151 | return base64; 152 | }); 153 | } else if (freeExports && !freeExports.nodeType) { 154 | if (freeModule) { // in Node.js or RingoJS v0.8.0+ 155 | freeModule.exports = base64; 156 | } else { // in Narwhal or RingoJS v0.7.0- 157 | for (var key in base64) { 158 | base64.hasOwnProperty(key) && (freeExports[key] = base64[key]); 159 | } 160 | } 161 | } else { // in Rhino or a web browser 162 | root.base64 = base64; 163 | } 164 | 165 | }(this)); 166 | -------------------------------------------------------------------------------- /CocosCreator/base64.js.meta: -------------------------------------------------------------------------------- 1 | { 2 | "ver": "1.0.5", 3 | "uuid": "287e45b7-2cd2-4d8e-ba1a-721515ff30ce", 4 | "isPlugin": false, 5 | "loadPluginInWeb": true, 6 | "loadPluginInNative": true, 7 | "loadPluginInEditor": false, 8 | "subMetas": {} 9 | } -------------------------------------------------------------------------------- /CocosCreator/cocos_creator1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kestrelm/Creature_WebGL/3d7f3563d183eef165aefeb6a3fbd9669b9f78af/CocosCreator/cocos_creator1.png -------------------------------------------------------------------------------- /CocosCreator/cocos_creator2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kestrelm/Creature_WebGL/3d7f3563d183eef165aefeb6a3fbd9669b9f78af/CocosCreator/cocos_creator2.png -------------------------------------------------------------------------------- /CocosCreator/fox2x.creature_pack: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kestrelm/Creature_WebGL/3d7f3563d183eef165aefeb6a3fbd9669b9f78af/CocosCreator/fox2x.creature_pack -------------------------------------------------------------------------------- /CocosCreator/fox2x.creature_pack.meta: -------------------------------------------------------------------------------- 1 | { 2 | "ver": "1.0.0", 3 | "uuid": "ef9c8f54-5057-4be1-a4c9-6f30233611b5", 4 | "subMetas": {} 5 | } -------------------------------------------------------------------------------- /CocosCreator/msgpack.js.meta: -------------------------------------------------------------------------------- 1 | { 2 | "ver": "1.0.5", 3 | "uuid": "56cd511a-1bab-4a1d-99cc-3fb1e9bc4fc7", 4 | "isPlugin": false, 5 | "loadPluginInWeb": true, 6 | "loadPluginInNative": false, 7 | "loadPluginInEditor": true, 8 | "subMetas": {} 9 | } -------------------------------------------------------------------------------- /CocosCreator/resources.meta: -------------------------------------------------------------------------------- 1 | { 2 | "ver": "1.0.1", 3 | "uuid": "08456479-ddd2-47a9-aad6-7e4f6279e89f", 4 | "isSubpackage": false, 5 | "subpackageName": "", 6 | "subMetas": {} 7 | } -------------------------------------------------------------------------------- /CocosCreator/resources/composer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kestrelm/Creature_WebGL/3d7f3563d183eef165aefeb6a3fbd9669b9f78af/CocosCreator/resources/composer.png -------------------------------------------------------------------------------- /CocosCreator/resources/composer.png.meta: -------------------------------------------------------------------------------- 1 | { 2 | "ver": "2.3.0", 3 | "uuid": "bbca0b46-6d29-4d4e-997b-b02b2ddb692c", 4 | "type": "sprite", 5 | "wrapMode": "clamp", 6 | "filterMode": "bilinear", 7 | "premultiplyAlpha": false, 8 | "platformSettings": {}, 9 | "subMetas": { 10 | "composer": { 11 | "ver": "1.0.3", 12 | "uuid": "8976c4b6-6e54-46d3-9d3e-6fa85e98fb7b", 13 | "rawTextureUuid": "bbca0b46-6d29-4d4e-997b-b02b2ddb692c", 14 | "trimType": "auto", 15 | "trimThreshold": 1, 16 | "rotated": false, 17 | "offsetX": 0, 18 | "offsetY": 5, 19 | "trimX": 20, 20 | "trimY": 20, 21 | "width": 4056, 22 | "height": 4046, 23 | "rawWidth": 4096, 24 | "rawHeight": 4096, 25 | "borderTop": 0, 26 | "borderBottom": 0, 27 | "borderLeft": 0, 28 | "borderRight": 0, 29 | "subMetas": {} 30 | } 31 | } 32 | } -------------------------------------------------------------------------------- /CocosCreator/resources/composerMData.json: -------------------------------------------------------------------------------- 1 | { 2 | "AnchorPoints": { 3 | "anchors": [], 4 | "name": "Anchor Points", 5 | "type": "anchorPointHolder" 6 | }, 7 | "AnimRegionColors": { 8 | "default": {} 9 | }, 10 | "CompositeClips": {}, 11 | "VertAttachments": { 12 | "attachments": [], 13 | "name": "Vert Attachments", 14 | "type": "vertAttachHolder" 15 | }, 16 | "eventTriggers": { 17 | "default": [] 18 | }, 19 | "meshes": { 20 | "1": { 21 | "endIndex": 3092, 22 | "id": 266, 23 | "startIndex": 3057 24 | }, 25 | "10": { 26 | "endIndex": 3377, 27 | "id": 257, 28 | "startIndex": 3321 29 | }, 30 | "10_0": { 31 | "endIndex": 3320, 32 | "id": 268, 33 | "startIndex": 3264 34 | }, 35 | "11": { 36 | "endIndex": 3263, 37 | "id": 256, 38 | "startIndex": 3237 39 | }, 40 | "11_0": { 41 | "endIndex": 3236, 42 | "id": 269, 43 | "startIndex": 3210 44 | }, 45 | "12": { 46 | "endIndex": 2438, 47 | "id": 255, 48 | "startIndex": 2412 49 | }, 50 | "13": { 51 | "endIndex": 3209, 52 | "id": 254, 53 | "startIndex": 3192 54 | }, 55 | "14": { 56 | "endIndex": 3179, 57 | "id": 253, 58 | "startIndex": 3168 59 | }, 60 | "14_0": { 61 | "endIndex": 3191, 62 | "id": 272, 63 | "startIndex": 3180 64 | }, 65 | "15": { 66 | "endIndex": 3683, 67 | "id": 252, 68 | "startIndex": 3645 69 | }, 70 | "16": { 71 | "endIndex": 3167, 72 | "id": 251, 73 | "startIndex": 3153 74 | }, 75 | "17": { 76 | "endIndex": 3152, 77 | "id": 250, 78 | "startIndex": 3129 79 | }, 80 | "18": { 81 | "endIndex": 3119, 82 | "id": 249, 83 | "startIndex": 3111 84 | }, 85 | "18_0": { 86 | "endIndex": 3128, 87 | "id": 271, 88 | "startIndex": 3120 89 | }, 90 | "19": { 91 | "endIndex": 3110, 92 | "id": 248, 93 | "startIndex": 3093 94 | }, 95 | "2": { 96 | "endIndex": 3728, 97 | "id": 265, 98 | "startIndex": 3684 99 | }, 100 | "20": { 101 | "endIndex": 3056, 102 | "id": 247, 103 | "startIndex": 2916 104 | }, 105 | "21": { 106 | "endIndex": 2915, 107 | "id": 246, 108 | "startIndex": 2892 109 | }, 110 | "22": { 111 | "endIndex": 2891, 112 | "id": 245, 113 | "startIndex": 2865 114 | }, 115 | "23": { 116 | "endIndex": 3767, 117 | "id": 244, 118 | "startIndex": 3735 119 | }, 120 | "24": { 121 | "endIndex": 2864, 122 | "id": 243, 123 | "startIndex": 2724 124 | }, 125 | "25": { 126 | "endIndex": 3734, 127 | "id": 242, 128 | "startIndex": 3729 129 | }, 130 | "26": { 131 | "endIndex": 2651, 132 | "id": 241, 133 | "startIndex": 2580 134 | }, 135 | "27": { 136 | "endIndex": 2579, 137 | "id": 240, 138 | "startIndex": 2511 139 | }, 140 | "28": { 141 | "endIndex": 2723, 142 | "id": 239, 143 | "startIndex": 2652 144 | }, 145 | "29": { 146 | "endIndex": 2381, 147 | "id": 238, 148 | "startIndex": 2346 149 | }, 150 | "3": { 151 | "endIndex": 3644, 152 | "id": 264, 153 | "startIndex": 3618 154 | }, 155 | "30": { 156 | "endIndex": 968, 157 | "id": 237, 158 | "startIndex": 930 159 | }, 160 | "31": { 161 | "endIndex": 2345, 162 | "id": 236, 163 | "startIndex": 2277 164 | }, 165 | "32": { 166 | "endIndex": 2204, 167 | "id": 235, 168 | "startIndex": 2160 169 | }, 170 | "33": { 171 | "endIndex": 2276, 172 | "id": 234, 173 | "startIndex": 2205 174 | }, 175 | "34": { 176 | "endIndex": 2159, 177 | "id": 233, 178 | "startIndex": 2103 179 | }, 180 | "35": { 181 | "endIndex": 2102, 182 | "id": 232, 183 | "startIndex": 2049 184 | }, 185 | "36": { 186 | "endIndex": 2048, 187 | "id": 231, 188 | "startIndex": 2004 189 | }, 190 | "37": { 191 | "endIndex": 2003, 192 | "id": 230, 193 | "startIndex": 1974 194 | }, 195 | "38": { 196 | "endIndex": 1973, 197 | "id": 229, 198 | "startIndex": 1947 199 | }, 200 | "39": { 201 | "endIndex": 1946, 202 | "id": 228, 203 | "startIndex": 1878 204 | }, 205 | "4": { 206 | "endIndex": 3617, 207 | "id": 263, 208 | "startIndex": 3594 209 | }, 210 | "40": { 211 | "endIndex": 2483, 212 | "id": 227, 213 | "startIndex": 2463 214 | }, 215 | "41": { 216 | "endIndex": 1877, 217 | "id": 226, 218 | "startIndex": 1830 219 | }, 220 | "42": { 221 | "endIndex": 2510, 222 | "id": 225, 223 | "startIndex": 2484 224 | }, 225 | "43": { 226 | "endIndex": 1829, 227 | "id": 224, 228 | "startIndex": 1770 229 | }, 230 | "44": { 231 | "endIndex": 2411, 232 | "id": 223, 233 | "startIndex": 2400 234 | }, 235 | "45": { 236 | "endIndex": 2399, 237 | "id": 222, 238 | "startIndex": 2382 239 | }, 240 | "46": { 241 | "endIndex": 2462, 242 | "id": 221, 243 | "startIndex": 2439 244 | }, 245 | "47": { 246 | "endIndex": 1769, 247 | "id": 220, 248 | "startIndex": 1722 249 | }, 250 | "48": { 251 | "endIndex": 1721, 252 | "id": 219, 253 | "startIndex": 1596 254 | }, 255 | "49": { 256 | "endIndex": 1595, 257 | "id": 218, 258 | "startIndex": 1554 259 | }, 260 | "5": { 261 | "endIndex": 3593, 262 | "id": 262, 263 | "startIndex": 3573 264 | }, 265 | "50": { 266 | "endIndex": 1553, 267 | "id": 217, 268 | "startIndex": 1509 269 | }, 270 | "51": { 271 | "endIndex": 1508, 272 | "id": 216, 273 | "startIndex": 1473 274 | }, 275 | "52": { 276 | "endIndex": 1331, 277 | "id": 215, 278 | "startIndex": 1242 279 | }, 280 | "53": { 281 | "endIndex": 1241, 282 | "id": 214, 283 | "startIndex": 1044 284 | }, 285 | "54": { 286 | "endIndex": 1472, 287 | "id": 213, 288 | "startIndex": 1401 289 | }, 290 | "55": { 291 | "endIndex": 1400, 292 | "id": 212, 293 | "startIndex": 1332 294 | }, 295 | "56": { 296 | "endIndex": 1043, 297 | "id": 211, 298 | "startIndex": 969 299 | }, 300 | "57": { 301 | "endIndex": 929, 302 | "id": 210, 303 | "startIndex": 858 304 | }, 305 | "58": { 306 | "endIndex": 671, 307 | "id": 209, 308 | "startIndex": 564 309 | }, 310 | "59": { 311 | "endIndex": 857, 312 | "id": 208, 313 | "startIndex": 672 314 | }, 315 | "6": { 316 | "endIndex": 3572, 317 | "id": 261, 318 | "startIndex": 3516 319 | }, 320 | "60": { 321 | "endIndex": 563, 322 | "id": 207, 323 | "startIndex": 546 324 | }, 325 | "61": { 326 | "endIndex": 545, 327 | "id": 206, 328 | "startIndex": 285 329 | }, 330 | "62": { 331 | "endIndex": 284, 332 | "id": 205, 333 | "startIndex": 96 334 | }, 335 | "63": { 336 | "endIndex": 95, 337 | "id": 204, 338 | "startIndex": 0 339 | }, 340 | "7": { 341 | "endIndex": 3515, 342 | "id": 260, 343 | "startIndex": 3438 344 | }, 345 | "8": { 346 | "endIndex": 3437, 347 | "id": 259, 348 | "startIndex": 3414 349 | }, 350 | "9": { 351 | "endIndex": 3413, 352 | "id": 258, 353 | "startIndex": 3378 354 | } 355 | }, 356 | "physicsData": { 357 | "default": {} 358 | }, 359 | "regionOrders": { 360 | "default": [] 361 | }, 362 | "skinSwapList": { 363 | "Default": { 364 | "swap": { 365 | "name": "Default", 366 | "swap_items": [] 367 | } 368 | } 369 | } 370 | } -------------------------------------------------------------------------------- /CocosCreator/resources/composerMData.json.meta: -------------------------------------------------------------------------------- 1 | { 2 | "ver": "1.0.0", 3 | "uuid": "79501b6f-c70c-4f4c-9543-c06546864cf2", 4 | "subMetas": {} 5 | } -------------------------------------------------------------------------------- /CocosCreator/resources/composerPack.txt.meta: -------------------------------------------------------------------------------- 1 | { 2 | "ver": "2.0.0", 3 | "uuid": "5b55fefb-62f2-4ded-b188-b56d04163f8c", 4 | "subMetas": {} 5 | } -------------------------------------------------------------------------------- /CocosCreator/resources/fox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kestrelm/Creature_WebGL/3d7f3563d183eef165aefeb6a3fbd9669b9f78af/CocosCreator/resources/fox.png -------------------------------------------------------------------------------- /CocosCreator/resources/fox.png.meta: -------------------------------------------------------------------------------- 1 | { 2 | "ver": "2.3.0", 3 | "uuid": "861df607-9733-44ea-8921-381750d23bf8", 4 | "type": "sprite", 5 | "wrapMode": "clamp", 6 | "filterMode": "bilinear", 7 | "premultiplyAlpha": false, 8 | "platformSettings": {}, 9 | "subMetas": { 10 | "fox": { 11 | "ver": "1.0.3", 12 | "uuid": "77674b2e-38a0-4dee-9be5-83192853d541", 13 | "rawTextureUuid": "861df607-9733-44ea-8921-381750d23bf8", 14 | "trimType": "auto", 15 | "trimThreshold": 1, 16 | "rotated": false, 17 | "offsetX": 0, 18 | "offsetY": 27.5, 19 | "trimX": 0, 20 | "trimY": 0, 21 | "width": 1600, 22 | "height": 845, 23 | "rawWidth": 1600, 24 | "rawHeight": 900, 25 | "borderTop": 0, 26 | "borderBottom": 0, 27 | "borderLeft": 0, 28 | "borderRight": 0, 29 | "subMetas": {} 30 | } 31 | } 32 | } -------------------------------------------------------------------------------- /CocosCreator/resources/skinSwap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kestrelm/Creature_WebGL/3d7f3563d183eef165aefeb6a3fbd9669b9f78af/CocosCreator/resources/skinSwap.png -------------------------------------------------------------------------------- /CocosCreator/resources/skinSwap.png.meta: -------------------------------------------------------------------------------- 1 | { 2 | "ver": "2.3.0", 3 | "uuid": "eb5dcf8a-8196-476b-b1f5-f9b611711455", 4 | "type": "sprite", 5 | "wrapMode": "clamp", 6 | "filterMode": "bilinear", 7 | "premultiplyAlpha": false, 8 | "platformSettings": {}, 9 | "subMetas": { 10 | "skinSwap": { 11 | "ver": "1.0.3", 12 | "uuid": "b8669151-9d38-4599-959c-ec79942279b1", 13 | "rawTextureUuid": "eb5dcf8a-8196-476b-b1f5-f9b611711455", 14 | "trimType": "auto", 15 | "trimThreshold": 1, 16 | "rotated": false, 17 | "offsetX": 4, 18 | "offsetY": -10, 19 | "trimX": 18, 20 | "trimY": 30, 21 | "width": 1172, 22 | "height": 1160, 23 | "rawWidth": 1200, 24 | "rawHeight": 1200, 25 | "borderTop": 0, 26 | "borderBottom": 0, 27 | "borderLeft": 0, 28 | "borderRight": 0, 29 | "subMetas": {} 30 | } 31 | } 32 | } -------------------------------------------------------------------------------- /CocosCreator/resources/skinSwap2x.creature_pack.txt.meta: -------------------------------------------------------------------------------- 1 | { 2 | "ver": "2.0.0", 3 | "uuid": "0b96b682-bb6c-4afe-8a12-23545fa56c4a", 4 | "subMetas": {} 5 | } -------------------------------------------------------------------------------- /CocosCreator/resources/skinSwapMdata.json: -------------------------------------------------------------------------------- 1 | { 2 | "AnchorPoints": { 3 | "anchors": [], 4 | "name": "Anchor Points", 5 | "type": "anchorPointHolder" 6 | }, 7 | "AnimRegionColors": { 8 | "cape": {}, 9 | "default": {}, 10 | "dress": {} 11 | }, 12 | "CompositeClips": {}, 13 | "VertAttachments": { 14 | "attachments": [], 15 | "name": "Vert Attachments", 16 | "type": "vertAttachHolder" 17 | }, 18 | "eventTriggers": { 19 | "cape": [], 20 | "default": [], 21 | "dress": [] 22 | }, 23 | "meshes": { 24 | "arm1": { 25 | "endIndex": 6707, 26 | "id": 8, 27 | "startIndex": 6456 28 | }, 29 | "arm2": { 30 | "endIndex": 1067, 31 | "id": 11, 32 | "startIndex": 816 33 | }, 34 | "cape": { 35 | "endIndex": 815, 36 | "id": 13, 37 | "startIndex": 0 38 | }, 39 | "dress": { 40 | "endIndex": 5321, 41 | "id": 5, 42 | "startIndex": 2856 43 | }, 44 | "gun": { 45 | "endIndex": 6455, 46 | "id": 10, 47 | "startIndex": 5976 48 | }, 49 | "lowerHair": { 50 | "endIndex": 1235, 51 | "id": 6, 52 | "startIndex": 1068 53 | }, 54 | "sword": { 55 | "endIndex": 5711, 56 | "id": 9, 57 | "startIndex": 5322 58 | }, 59 | "torso": { 60 | "endIndex": 2855, 61 | "id": 7, 62 | "startIndex": 1236 63 | }, 64 | "upperHair": { 65 | "endIndex": 5975, 66 | "id": 4, 67 | "startIndex": 5712 68 | } 69 | }, 70 | "physicsData": { 71 | "cape": { 72 | "motor_15": [ 73 | "Bone_28", 74 | "Bone_29" 75 | ], 76 | "motor_17": [ 77 | "Bone_42", 78 | "Bone_43", 79 | "Bone_44", 80 | "Bone_45" 81 | ], 82 | "motor_24": [ 83 | "Bone_38", 84 | "Bone_39", 85 | "Bone_40", 86 | "Bone_41" 87 | ], 88 | "motor_30": [ 89 | "Bone_30", 90 | "Bone_31", 91 | "Bone_32", 92 | "Bone_33" 93 | ], 94 | "motor_34": [ 95 | "Bone_34", 96 | "Bone_35", 97 | "Bone_36", 98 | "Bone_37" 99 | ], 100 | "motor_48": [ 101 | "Bone_47", 102 | "Bone_48", 103 | "Bone_49", 104 | "Bone_50", 105 | "Bone_51", 106 | "Bone_52" 107 | ], 108 | "motor_59": [ 109 | "Bone_53", 110 | "Bone_54", 111 | "Bone_55", 112 | "Bone_56", 113 | "Bone_57", 114 | "Bone_58" 115 | ], 116 | "motor_6": [ 117 | "Bone_19", 118 | "Bone_20" 119 | ], 120 | "motor_8": [ 121 | "Bone_59", 122 | "Bone_60", 123 | "Bone_61", 124 | "Bone_62", 125 | "Bone_63" 126 | ] 127 | }, 128 | "default": { 129 | "motor_15": [ 130 | "Bone_28", 131 | "Bone_29" 132 | ], 133 | "motor_6": [ 134 | "Bone_19", 135 | "Bone_20" 136 | ] 137 | }, 138 | "dress": { 139 | "motor_12": [ 140 | "Bone_19", 141 | "Bone_20" 142 | ], 143 | "motor_15": [ 144 | "Bone_24", 145 | "Bone_25", 146 | "Bone_26" 147 | ], 148 | "motor_26": [ 149 | "Bone_43", 150 | "Bone_44", 151 | "Bone_45" 152 | ], 153 | "motor_31": [ 154 | "Bone_31", 155 | "Bone_32", 156 | "Bone_33" 157 | ], 158 | "motor_35": [ 159 | "Bone_35", 160 | "Bone_36", 161 | "Bone_37" 162 | ], 163 | "motor_39": [ 164 | "Bone_39", 165 | "Bone_40", 166 | "Bone_41" 167 | ], 168 | "motor_5": [ 169 | "Bone_27", 170 | "Bone_28", 171 | "Bone_29" 172 | ] 173 | } 174 | }, 175 | "regionOrders": { 176 | "cape": [], 177 | "default": [], 178 | "dress": [] 179 | }, 180 | "skinSwapList": { 181 | "Default": { 182 | "swap": { 183 | "name": "Default", 184 | "swap_items": [ 185 | "arm2", 186 | "lowerHair", 187 | "upperHair", 188 | "torso", 189 | "arm1" 190 | ] 191 | } 192 | }, 193 | "cape": { 194 | "swap": { 195 | "name": "cape", 196 | "swap_items": [ 197 | "cape", 198 | "arm1", 199 | "gun", 200 | "arm2", 201 | "torso", 202 | "lowerHair", 203 | "upperHair" 204 | ] 205 | } 206 | }, 207 | "defaultGun": { 208 | "swap": { 209 | "name": "defaultGun", 210 | "swap_items": [ 211 | "arm2", 212 | "gun", 213 | "torso", 214 | "arm1", 215 | "lowerHair", 216 | "upperHair" 217 | ] 218 | } 219 | }, 220 | "dress": { 221 | "swap": { 222 | "name": "dress", 223 | "swap_items": [ 224 | "arm2", 225 | "torso", 226 | "lowerHair", 227 | "upperHair", 228 | "dress", 229 | "arm1" 230 | ] 231 | } 232 | }, 233 | "dressSword": { 234 | "swap": { 235 | "name": "dressSword", 236 | "swap_items": [ 237 | "arm2", 238 | "lowerHair", 239 | "torso", 240 | "arm1", 241 | "dress", 242 | "sword", 243 | "upperHair" 244 | ] 245 | } 246 | } 247 | } 248 | } -------------------------------------------------------------------------------- /CocosCreator/resources/skinSwapMdata.json.meta: -------------------------------------------------------------------------------- 1 | { 2 | "ver": "1.0.0", 3 | "uuid": "e4cd4201-003c-462b-90d2-233339a32b1d", 4 | "subMetas": {} 5 | } -------------------------------------------------------------------------------- /CocosCreator/skinSwap2x.creature_pack: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kestrelm/Creature_WebGL/3d7f3563d183eef165aefeb6a3fbd9669b9f78af/CocosCreator/skinSwap2x.creature_pack -------------------------------------------------------------------------------- /CocosCreator/skinSwap2x.creature_pack.meta: -------------------------------------------------------------------------------- 1 | { 2 | "ver": "1.0.0", 3 | "uuid": "81d54b44-ae90-4136-a840-593c0b763dcd", 4 | "subMetas": {} 5 | } -------------------------------------------------------------------------------- /CocosCreator/test.fire: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "__type__": "cc.SceneAsset", 4 | "_name": "", 5 | "_objFlags": 0, 6 | "_native": "", 7 | "scene": { 8 | "__id__": 1 9 | } 10 | }, 11 | { 12 | "__type__": "cc.Scene", 13 | "_objFlags": 0, 14 | "_parent": null, 15 | "_children": [ 16 | { 17 | "__id__": 2 18 | } 19 | ], 20 | "_active": true, 21 | "_level": 0, 22 | "_components": [], 23 | "_prefab": null, 24 | "_opacity": 255, 25 | "_color": { 26 | "__type__": "cc.Color", 27 | "r": 255, 28 | "g": 255, 29 | "b": 255, 30 | "a": 255 31 | }, 32 | "_contentSize": { 33 | "__type__": "cc.Size", 34 | "width": 0, 35 | "height": 0 36 | }, 37 | "_anchorPoint": { 38 | "__type__": "cc.Vec2", 39 | "x": 0, 40 | "y": 0 41 | }, 42 | "_scale": { 43 | "__type__": "cc.Vec3", 44 | "x": 0.4703125, 45 | "y": 0.4703125, 46 | "z": 0.4703125 47 | }, 48 | "_quat": { 49 | "__type__": "cc.Quat", 50 | "x": 0, 51 | "y": 0, 52 | "z": 0, 53 | "w": 1 54 | }, 55 | "_zIndex": 0, 56 | "_is3DNode": true, 57 | "groupIndex": 0, 58 | "autoReleaseAssets": false, 59 | "_id": "1fc6f4a4-ab29-4dc1-b1e6-80a84e888216" 60 | }, 61 | { 62 | "__type__": "cc.Node", 63 | "_name": "Canvas", 64 | "_objFlags": 0, 65 | "_parent": { 66 | "__id__": 1 67 | }, 68 | "_children": [ 69 | { 70 | "__id__": 3 71 | }, 72 | { 73 | "__id__": 5 74 | } 75 | ], 76 | "_active": true, 77 | "_level": 1, 78 | "_components": [ 79 | { 80 | "__id__": 9 81 | } 82 | ], 83 | "_prefab": null, 84 | "_opacity": 255, 85 | "_color": { 86 | "__type__": "cc.Color", 87 | "r": 255, 88 | "g": 255, 89 | "b": 255, 90 | "a": 255 91 | }, 92 | "_contentSize": { 93 | "__type__": "cc.Size", 94 | "width": 960, 95 | "height": 640 96 | }, 97 | "_anchorPoint": { 98 | "__type__": "cc.Vec2", 99 | "x": 0.5, 100 | "y": 0.5 101 | }, 102 | "_position": { 103 | "__type__": "cc.Vec3", 104 | "x": 480, 105 | "y": 320, 106 | "z": 0 107 | }, 108 | "_scale": { 109 | "__type__": "cc.Vec3", 110 | "x": 1, 111 | "y": 1, 112 | "z": 1 113 | }, 114 | "_quat": { 115 | "__type__": "cc.Quat", 116 | "x": 0, 117 | "y": 0, 118 | "z": 0, 119 | "w": 1 120 | }, 121 | "_skewX": 0, 122 | "_skewY": 0, 123 | "_zIndex": 0, 124 | "_is3DNode": false, 125 | "groupIndex": 0, 126 | "_id": "beBGXJT0RCo6i9ByBx3LDt" 127 | }, 128 | { 129 | "__type__": "cc.Node", 130 | "_name": "Main Camera", 131 | "_objFlags": 0, 132 | "_parent": { 133 | "__id__": 2 134 | }, 135 | "_children": [], 136 | "_active": true, 137 | "_level": 2, 138 | "_components": [ 139 | { 140 | "__id__": 4 141 | } 142 | ], 143 | "_prefab": null, 144 | "_opacity": 255, 145 | "_color": { 146 | "__type__": "cc.Color", 147 | "r": 255, 148 | "g": 255, 149 | "b": 255, 150 | "a": 255 151 | }, 152 | "_contentSize": { 153 | "__type__": "cc.Size", 154 | "width": 0, 155 | "height": 0 156 | }, 157 | "_anchorPoint": { 158 | "__type__": "cc.Vec2", 159 | "x": 0.5, 160 | "y": 0.5 161 | }, 162 | "_position": { 163 | "__type__": "cc.Vec3", 164 | "x": 0, 165 | "y": 0, 166 | "z": 0 167 | }, 168 | "_scale": { 169 | "__type__": "cc.Vec3", 170 | "x": 1, 171 | "y": 1, 172 | "z": 1 173 | }, 174 | "_quat": { 175 | "__type__": "cc.Quat", 176 | "x": 0, 177 | "y": 0, 178 | "z": 0, 179 | "w": 1 180 | }, 181 | "_skewX": 0, 182 | "_skewY": 0, 183 | "_zIndex": 0, 184 | "_is3DNode": false, 185 | "groupIndex": 0, 186 | "_id": "eae/Js2ixKJ5rODq11qCwj" 187 | }, 188 | { 189 | "__type__": "cc.Camera", 190 | "_name": "", 191 | "_objFlags": 0, 192 | "node": { 193 | "__id__": 3 194 | }, 195 | "_enabled": true, 196 | "_cullingMask": 4294967295, 197 | "_clearFlags": 7, 198 | "_backgroundColor": { 199 | "__type__": "cc.Color", 200 | "r": 0, 201 | "g": 0, 202 | "b": 0, 203 | "a": 255 204 | }, 205 | "_depth": -1, 206 | "_zoomRatio": 1, 207 | "_targetTexture": null, 208 | "_fov": 60, 209 | "_orthoSize": 10, 210 | "_nearClip": 0.1, 211 | "_farClip": 4096, 212 | "_ortho": true, 213 | "_rect": { 214 | "__type__": "cc.Rect", 215 | "x": 0, 216 | "y": 0, 217 | "width": 1, 218 | "height": 1 219 | }, 220 | "_id": "2aMcMHjqdGWoy+7TwYaxKK" 221 | }, 222 | { 223 | "__type__": "cc.Node", 224 | "_name": "New Sprite(Splash)", 225 | "_objFlags": 0, 226 | "_parent": { 227 | "__id__": 2 228 | }, 229 | "_children": [ 230 | { 231 | "__id__": 6 232 | } 233 | ], 234 | "_active": true, 235 | "_level": 2, 236 | "_components": [ 237 | { 238 | "__id__": 8 239 | } 240 | ], 241 | "_prefab": null, 242 | "_opacity": 255, 243 | "_color": { 244 | "__type__": "cc.Color", 245 | "r": 0, 246 | "g": 139, 247 | "b": 173, 248 | "a": 255 249 | }, 250 | "_contentSize": { 251 | "__type__": "cc.Size", 252 | "width": 900, 253 | "height": 900 254 | }, 255 | "_anchorPoint": { 256 | "__type__": "cc.Vec2", 257 | "x": 0.5, 258 | "y": 0.5 259 | }, 260 | "_position": { 261 | "__type__": "cc.Vec3", 262 | "x": 0, 263 | "y": 0, 264 | "z": 0 265 | }, 266 | "_scale": { 267 | "__type__": "cc.Vec3", 268 | "x": 1, 269 | "y": 1, 270 | "z": 1 271 | }, 272 | "_quat": { 273 | "__type__": "cc.Quat", 274 | "x": 0, 275 | "y": 0, 276 | "z": 0, 277 | "w": 1 278 | }, 279 | "_skewX": 0, 280 | "_skewY": 0, 281 | "_zIndex": 0, 282 | "_is3DNode": false, 283 | "groupIndex": 0, 284 | "_rotationX": 0, 285 | "_rotationY": 0, 286 | "_id": "f59LOlAXJEwKGU4y4bFXah" 287 | }, 288 | { 289 | "__type__": "cc.Node", 290 | "_name": "New Node", 291 | "_objFlags": 0, 292 | "_parent": { 293 | "__id__": 5 294 | }, 295 | "_children": [], 296 | "_active": true, 297 | "_level": 3, 298 | "_components": [ 299 | { 300 | "__id__": 7 301 | } 302 | ], 303 | "_prefab": null, 304 | "_opacity": 255, 305 | "_color": { 306 | "__type__": "cc.Color", 307 | "r": 255, 308 | "g": 255, 309 | "b": 255, 310 | "a": 255 311 | }, 312 | "_contentSize": { 313 | "__type__": "cc.Size", 314 | "width": 200, 315 | "height": 200 316 | }, 317 | "_anchorPoint": { 318 | "__type__": "cc.Vec2", 319 | "x": 0.5, 320 | "y": 0.5 321 | }, 322 | "_position": { 323 | "__type__": "cc.Vec3", 324 | "x": -94, 325 | "y": -340, 326 | "z": 0 327 | }, 328 | "_scale": { 329 | "__type__": "cc.Vec3", 330 | "x": 1, 331 | "y": 1, 332 | "z": 1 333 | }, 334 | "_quat": { 335 | "__type__": "cc.Quat", 336 | "x": 0, 337 | "y": 0, 338 | "z": 0, 339 | "w": 1 340 | }, 341 | "_skewX": 0, 342 | "_skewY": 0, 343 | "_zIndex": 0, 344 | "_is3DNode": false, 345 | "groupIndex": 0, 346 | "_id": "5eU1nSmNhGUbdy6V4trYuZ" 347 | }, 348 | { 349 | "__type__": "d1b9bOoguZNObajpmvgl164", 350 | "_name": "", 351 | "_objFlags": 0, 352 | "node": { 353 | "__id__": 6 354 | }, 355 | "_enabled": true, 356 | "_srcBlendFactor": 770, 357 | "_dstBlendFactor": 771, 358 | "charTexture": { 359 | "__uuid__": "eb5dcf8a-8196-476b-b1f5-f9b611711455" 360 | }, 361 | "creaturePackAsset": { 362 | "__uuid__": "0b96b682-bb6c-4afe-8a12-23545fa56c4a" 363 | }, 364 | "metaDataAsset": { 365 | "__uuid__": "e4cd4201-003c-462b-90d2-233339a32b1d" 366 | }, 367 | "useSkinSwap": true, 368 | "skinSwapName": "cape", 369 | "startAnimation": "cape", 370 | "_id": "2e0QxTG2dIKaHCdi6yfjsE" 371 | }, 372 | { 373 | "__type__": "cc.Sprite", 374 | "_name": "", 375 | "_objFlags": 0, 376 | "node": { 377 | "__id__": 5 378 | }, 379 | "_enabled": true, 380 | "_srcBlendFactor": 770, 381 | "_dstBlendFactor": 771, 382 | "_spriteFrame": { 383 | "__uuid__": "a23235d1-15db-4b95-8439-a2e005bfff91" 384 | }, 385 | "_type": 0, 386 | "_sizeMode": 0, 387 | "_fillType": 0, 388 | "_fillCenter": { 389 | "__type__": "cc.Vec2", 390 | "x": 0, 391 | "y": 0 392 | }, 393 | "_fillStart": 0, 394 | "_fillRange": 0, 395 | "_isTrimmedMode": true, 396 | "_state": 0, 397 | "_atlas": null, 398 | "_id": "7du/t1hjVHP6SlAfpZmZr9" 399 | }, 400 | { 401 | "__type__": "cc.Canvas", 402 | "_name": "", 403 | "_objFlags": 0, 404 | "node": { 405 | "__id__": 2 406 | }, 407 | "_enabled": true, 408 | "_designResolution": { 409 | "__type__": "cc.Size", 410 | "width": 960, 411 | "height": 640 412 | }, 413 | "_fitWidth": false, 414 | "_fitHeight": true, 415 | "_id": "95W1UikvlAWJX4DsEjcbLF" 416 | } 417 | ] -------------------------------------------------------------------------------- /CocosCreator/test.fire.meta: -------------------------------------------------------------------------------- 1 | { 2 | "ver": "1.0.0", 3 | "uuid": "1fc6f4a4-ab29-4dc1-b1e6-80a84e888216", 4 | "asyncLoadAssets": false, 5 | "autoReleaseAssets": false, 6 | "subMetas": {} 7 | } -------------------------------------------------------------------------------- /Construct2/README.md: -------------------------------------------------------------------------------- 1 | # Creature Construct 2 Plugin 2 | 3 | This document is about the [Creature](http://creature.kestrelmoon.com) runtime for [Construct 2](https://www.scirra.com/construct2). Please check out the sample demo in the 4 | **demo** directory for more information. 5 | 6 | ![alt text](https://raw.githubusercontent.com/kestrelm/Creature_WebGL/master/Construct2/pic2.png "Image2") 7 | 8 | Watch the Demo video [here](https://youtu.be/btMsOebcwrA). 9 | 10 | ### Installation 11 | 12 | 1. Close Construct 2 13 | 14 | 2. Copy the plugin's folder ( **creature2d** ) to **(your construct 2 install path)\exporters\html5\plugins**. You'll see each plugin has its own folder here, so to add a new plugin create a new folder ( **creature2d** ) and add the plugin's files inside it. 15 | 16 | 3. Launch Construct 2 and the plugin or behavior should be available from the editor. 17 | 18 | ### Requirements 19 | 20 | 1. Exported Creature JSON 21 | 22 | 2. Exported Creature Meta Data ( for Skin/Item Swapping) 23 | 24 | 3. Exported Creature character PNG Image Texture Atlas 25 | 26 | ![alt text](https://raw.githubusercontent.com/kestrelm/Creature_WebGL/master/Construct2/pic1.png "Image1") 27 | 28 | ### Loading in the JSON 29 | 30 | First, construct a new **AJAX** request to load in the JSON file. Tag it with an identifier you can recognize easily. Then, add an **AJAX** event completed on the tag. In the completion event, call the **Load Json()** function on your **Creature2D** object with **AJAX.LastData** as the entry ( this loads the most recently requested JSON file ) 31 | 32 | By default, when you play the game, you should already see the character playing its default animation. 33 | 34 | ### Switching/Blending into Animations 35 | 36 | You have 2 options, either call **Switch Animation()** with a target animation name OR call **Blend to Animation()** with a target animation name and a blend delta factor. Blend delta factor is a value > 0 and < 1. The larger the value, the faster the current animation blends into the target animation. 37 | 38 | ### Setting Animation Playback Speed 39 | 40 | Set the animation playback speed in terms of sampling rate by calling **Set Animation Speed**. The typical values are 60 ( 60 fps ) but you can lower it down to 30 if you want. Note that this still ensures smooth playback throughout as key poses are still interpolated during runtime. 41 | 42 | ### Controlling Animation Looping 43 | 44 | Enable/disable animation playback looping by calling **Set Animation Loop()** with a value of either 0 ( no loop ) or 1 ( looping ). 45 | 46 | ### Flipping your character along X or Y Axis 47 | 48 | If you want to easily flip your character in either X or Y Axis ( for directional changes ), just call **Set Animation Axis Flip()**. You can flip either axis, with the value for each axis being either -1 or 1. 49 | 50 | ### Anchor Points 51 | 52 | You can enable anchor points by calling **Set Anchor Points Active()**. Anchor points are defined in the Creature Animation Editor for each character. 53 | 54 | ### Performance Point Caching 55 | 56 | To skip the posing engine completely, you can activate **Point Caching** by calling **Make Point Cache()** with the target animation name. This allows you to have very high performance playback with minimal computation at runtime. 57 | 58 | ### Skin/Item Swapping 59 | 60 | You can also use **Skin Swapping** to swap out items, clothing, hairstyles etc. on your characters. First, you need to use the typical **AJAX** request/completion procedure to load your **Creature MetaData JSON**. After that, you can easily enable **Skin Swapping** by calling **SkinSwap()** with the target **Skin Swap** name. You can disable **Skin Swapping** by calling **Disable SkinSwap()** 61 | 62 | -------------------------------------------------------------------------------- /Construct2/creature2d/PluginIcon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kestrelm/Creature_WebGL/3d7f3563d183eef165aefeb6a3fbd9669b9f78af/Construct2/creature2d/PluginIcon.ico -------------------------------------------------------------------------------- /Construct2/creature2d/common.js: -------------------------------------------------------------------------------- 1 | // Scripts in this file are included in both the IDE and runtime, so you only 2 | // need to write scripts common to both once. 3 | -------------------------------------------------------------------------------- /Construct2/demo/test.capx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kestrelm/Creature_WebGL/3d7f3563d183eef165aefeb6a3fbd9669b9f78af/Construct2/demo/test.capx -------------------------------------------------------------------------------- /Construct2/pic1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kestrelm/Creature_WebGL/3d7f3563d183eef165aefeb6a3fbd9669b9f78af/Construct2/pic1.png -------------------------------------------------------------------------------- /Construct2/pic2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kestrelm/Creature_WebGL/3d7f3563d183eef165aefeb6a3fbd9669b9f78af/Construct2/pic2.png -------------------------------------------------------------------------------- /CreatureBabylonRenderer.js: -------------------------------------------------------------------------------- 1 | /****************************************************************************** 2 | * Creature Runtimes License 3 | * 4 | * Copyright (c) 2015, Kestrel Moon Studios 5 | * All rights reserved. 6 | * 7 | * Preamble: This Agreement governs the relationship between Licensee and Kestrel Moon Studios(Hereinafter: Licensor). 8 | * This Agreement sets the terms, rights, restrictions and obligations on using [Creature Runtimes] (hereinafter: The Software) created and owned by Licensor, 9 | * as detailed herein: 10 | * License Grant: Licensor hereby grants Licensee a Sublicensable, Non-assignable & non-transferable, Commercial, Royalty free, 11 | * Including the rights to create but not distribute derivative works, Non-exclusive license, all with accordance with the terms set forth and 12 | * other legal restrictions set forth in 3rd party software used while running Software. 13 | * Limited: Licensee may use Software for the purpose of: 14 | * Running Software on Licensee’s Website[s] and Server[s]; 15 | * Allowing 3rd Parties to run Software on Licensee’s Website[s] and Server[s]; 16 | * Publishing Software’s output to Licensee and 3rd Parties; 17 | * Distribute verbatim copies of Software’s output (including compiled binaries); 18 | * Modify Software to suit Licensee’s needs and specifications. 19 | * Binary Restricted: Licensee may sublicense Software as a part of a larger work containing more than Software, 20 | * distributed solely in Object or Binary form under a personal, non-sublicensable, limited license. Such redistribution shall be limited to unlimited codebases. 21 | * Non Assignable & Non-Transferable: Licensee may not assign or transfer his rights and duties under this license. 22 | * Commercial, Royalty Free: Licensee may use Software for any purpose, including paid-services, without any royalties 23 | * Including the Right to Create Derivative Works: Licensee may create derivative works based on Software, 24 | * including amending Software’s source code, modifying it, integrating it into a larger work or removing portions of Software, 25 | * as long as no distribution of the derivative works is made 26 | * 27 | * THE RUNTIMES IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 28 | * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 29 | * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 30 | * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 31 | * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 32 | * OUT OF OR IN CONNECTION WITH THE RUNTIMES OR THE USE OR OTHER DEALINGS IN THE 33 | * RUNTIMES. 34 | *****************************************************************************/ 35 | 36 | function CreatureBabylonRenderer(name, scene, manager_in, texture_in) 37 | { 38 | this.creature_manager = manager_in; 39 | this.texture = texture_in; 40 | this.scene = scene; 41 | this.name = name; 42 | this.normals = []; 43 | this.finalUVs = []; 44 | 45 | this.renderMesh = null; 46 | }; 47 | 48 | 49 | CreatureBabylonRenderer.prototype.UpdateData = function() 50 | { 51 | var target_creature = this.creature_manager.target_creature; 52 | var first_update = false; 53 | 54 | if(this.renderMesh == null) 55 | { 56 | first_update = true; 57 | this.renderMesh = new BABYLON.Mesh(this.name, this.scene); 58 | this.renderMesh.setIndices(target_creature.global_indices); 59 | this.renderMesh.material = this.texture; 60 | this.renderMesh.scaling = new BABYLON.Vector3(1, 1, 1); 61 | 62 | var nIndex = 0; 63 | this.normals = []; 64 | for(var i = 0; i < target_creature.total_num_pts; i++) 65 | { 66 | this.normals.push(0); 67 | this.normals.push(0); 68 | this.normals.push(-1); 69 | 70 | this.finalUVs.push(0); 71 | this.finalUVs.push(0); 72 | 73 | nIndex += 3; 74 | } 75 | } 76 | 77 | var read_pts = target_creature.render_pts; 78 | var read_uvs = target_creature.global_uvs; 79 | 80 | var uvIdx = 0; 81 | for(var i = 0; i < target_creature.total_num_pts; i++) 82 | { 83 | this.finalUVs[uvIdx] = read_uvs[uvIdx]; 84 | this.finalUVs[uvIdx + 1] = 1.0 - read_uvs[uvIdx + 1]; 85 | uvIdx += 2; 86 | } 87 | 88 | var read_colours = target_creature.render_colours; 89 | 90 | if(first_update) 91 | { 92 | this.renderMesh.setVerticesData(BABYLON.VertexBuffer.PositionKind, read_pts, true); 93 | this.renderMesh.setVerticesData(BABYLON.VertexBuffer.UVKind, this.finalUVs, true); 94 | this.renderMesh.setVerticesData(BABYLON.VertexBuffer.ColorKind, read_colours, true); 95 | this.renderMesh.setVerticesData(BABYLON.VertexBuffer.NormalKind, this.normals, true); 96 | } 97 | else { 98 | this.renderMesh.updateVerticesData(BABYLON.VertexBuffer.PositionKind, read_pts, true, false); 99 | this.renderMesh.updateVerticesData(BABYLON.VertexBuffer.UVKind, this.finalUVs, true, false); 100 | this.renderMesh.updateVerticesData(BABYLON.VertexBuffer.ColorKind, read_colours, true, false); 101 | this.renderMesh.updateVerticesData(BABYLON.VertexBuffer.NormalKind, this.normals, true, false); 102 | } 103 | }; 104 | -------------------------------------------------------------------------------- /CreaturePackPixiJSRefRenderer.js: -------------------------------------------------------------------------------- 1 | /****************************************************************************** 2 | * Creature Runtimes License 3 | * 4 | * Copyright (c) 2015, Kestrel Moon Studios 5 | * All rights reserved. 6 | * 7 | * Preamble: This Agreement governs the relationship between Licensee and Kestrel Moon Studios(Hereinafter: Licensor). 8 | * This Agreement sets the terms, rights, restrictions and obligations on using [Creature Runtimes] (hereinafter: The Software) created and owned by Licensor, 9 | * as detailed herein: 10 | * License Grant: Licensor hereby grants Licensee a Sublicensable, Non-assignable & non-transferable, Commercial, Royalty free, 11 | * Including the rights to create but not distribute derivative works, Non-exclusive license, all with accordance with the terms set forth and 12 | * other legal restrictions set forth in 3rd party software used while running Software. 13 | * Limited: Licensee may use Software for the purpose of: 14 | * Running Software on Licensee’s Website[s] and Server[s]; 15 | * Allowing 3rd Parties to run Software on Licensee’s Website[s] and Server[s]; 16 | * Publishing Software’s output to Licensee and 3rd Parties; 17 | * Distribute verbatim copies of Software’s output (including compiled binaries); 18 | * Modify Software to suit Licensee’s needs and specifications. 19 | * Binary Restricted: Licensee may sublicense Software as a part of a larger work containing more than Software, 20 | * distributed solely in Object or Binary form under a personal, non-sublicensable, limited license. Such redistribution shall be limited to unlimited codebases. 21 | * Non Assignable & Non-Transferable: Licensee may not assign or transfer his rights and duties under this license. 22 | * Commercial, Royalty Free: Licensee may use Software for any purpose, including paid-services, without any royalties 23 | * Including the Right to Create Derivative Works: Licensee may create derivative works based on Software, 24 | * including amending Software’s source code, modifying it, integrating it into a larger work or removing portions of Software, 25 | * as long as no distribution of the derivative works is made 26 | * 27 | * THE RUNTIMES IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 28 | * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 29 | * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 30 | * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 31 | * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 32 | * OUT OF OR IN CONNECTION WITH THE RUNTIMES OR THE USE OR OTHER DEALINGS IN THE 33 | * RUNTIMES. 34 | *****************************************************************************/ 35 | 36 | // CreaturePackRenderer 37 | function CreaturePackRenderer(pack_data_in, texture_in) 38 | { 39 | this.pack_data = pack_data_in; 40 | this.pack_renderer = new CreatureHaxeBaseRenderer(this.pack_data); 41 | 42 | var mIndices = new Uint16Array(this.pack_data.indices.length); 43 | for(var i = 0; i < mIndices.length; i++) 44 | { 45 | mIndices[i] = this.pack_data.indices[i]; 46 | } 47 | 48 | PIXI.SimpleMesh.call( 49 | this, 50 | texture_in, 51 | new Float32Array(this.pack_renderer.render_points.length), 52 | new Float32Array(this.pack_renderer.render_uvs.length), 53 | mIndices, 54 | PIXI.DRAW_MODES.TRIANGLES 55 | ); 56 | 57 | this.texture = texture_in; 58 | this.dirty = true; 59 | this.blendMode = PIXI.BLEND_MODES.NORMAL; 60 | this.creatureBoundsMin = new PIXI.Point(0,0); 61 | this.creatureBoundsMax = new PIXI.Point(0,0); 62 | 63 | this.colors = new Float32Array([1,1,1,1]); 64 | this.UpdateRenderData(this.pack_data.points, this.pack_data.uvs); 65 | }; 66 | 67 | // constructor 68 | CreaturePackRenderer.prototype = Object.create(PIXI.SimpleMesh.prototype); 69 | CreaturePackRenderer.prototype.constructor = CreaturePackRenderer; 70 | 71 | CreaturePackRenderer.prototype.refresh = function() 72 | { 73 | this.pack_renderer.syncRenderData(); 74 | var read_pts = this.pack_renderer.render_points; 75 | var read_uvs = this.pack_renderer.render_uvs; 76 | this.UpdateRenderData(read_pts, read_uvs); 77 | 78 | this.autoUpdate = true; 79 | var setUVs = this.geometry.getBuffer('aTextureCoord'); 80 | setUVs.update(); 81 | }; 82 | 83 | CreaturePackRenderer.prototype.UpdateRenderData = function(inputVerts, inputUVs) 84 | { 85 | var write_pt_index = 0; 86 | var setUVs = this.geometry.getBuffer('aTextureCoord').data; 87 | for(var i = 0; i < this.pack_renderer.render_points.length; i+=2) 88 | { 89 | this.vertices [i] = this.pack_renderer.render_points[i]; 90 | this.vertices [i + 1] = -this.pack_renderer.render_points[i + 1]; 91 | 92 | setUVs[i] = this.pack_renderer.render_uvs[i]; 93 | setUVs[i + 1] = this.pack_renderer.render_uvs[i + 1]; 94 | } 95 | }; -------------------------------------------------------------------------------- /CreaturePhaserPackRenderer.js: -------------------------------------------------------------------------------- 1 | /****************************************************************************** 2 | * Creature Runtimes License 3 | * 4 | * Copyright (c) 2015, Kestrel Moon Studios 5 | * All rights reserved. 6 | * 7 | * Preamble: This Agreement governs the relationship between Licensee and Kestrel Moon Studios(Hereinafter: Licensor). 8 | * This Agreement sets the terms, rights, restrictions and obligations on using [Creature Runtimes] (hereinafter: The Software) created and owned by Licensor, 9 | * as detailed herein: 10 | * License Grant: Licensor hereby grants Licensee a Sublicensable, Non-assignable & non-transferable, Commercial, Royalty free, 11 | * Including the rights to create but not distribute derivative works, Non-exclusive license, all with accordance with the terms set forth and 12 | * other legal restrictions set forth in 3rd party software used while running Software. 13 | * Limited: Licensee may use Software for the purpose of: 14 | * Running Software on Licensee’s Website[s] and Server[s]; 15 | * Allowing 3rd Parties to run Software on Licensee’s Website[s] and Server[s]; 16 | * Publishing Software’s output to Licensee and 3rd Parties; 17 | * Distribute verbatim copies of Software’s output (including compiled binaries); 18 | * Modify Software to suit Licensee’s needs and specifications. 19 | * Binary Restricted: Licensee may sublicense Software as a part of a larger work containing more than Software, 20 | * distributed solely in Object or Binary form under a personal, non-sublicensable, limited license. Such redistribution shall be limited to unlimited codebases. 21 | * Non Assignable & Non-Transferable: Licensee may not assign or transfer his rights and duties under this license. 22 | * Commercial, Royalty Free: Licensee may use Software for any purpose, including paid-services, without any royalties 23 | * Including the Right to Create Derivative Works: Licensee may create derivative works based on Software, 24 | * including amending Software’s source code, modifying it, integrating it into a larger work or removing portions of Software, 25 | * as long as no distribution of the derivative works is made 26 | * 27 | * THE RUNTIMES IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 28 | * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 29 | * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 30 | * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 31 | * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 32 | * OUT OF OR IN CONNECTION WITH THE RUNTIMES OR THE USE OR OTHER DEALINGS IN THE 33 | * RUNTIMES. 34 | *****************************************************************************/ 35 | 36 | Phaser.CreaturePackDraw = function (game, x, y, pack_data_in, texture) { 37 | x = x || 0; 38 | y = y || 0; 39 | 40 | /** 41 | * @property {Phaser.Game} game - A reference to the currently running Game. 42 | */ 43 | this.game = game; 44 | 45 | 46 | /** 47 | * @property {number} timeDelta - How quickly the animation time/playback advances 48 | */ 49 | this.timeDelta = 0.05; 50 | 51 | /** 52 | * @property {string} name - The user defined name given to this Image. 53 | * @default 54 | */ 55 | this.name = ''; 56 | 57 | /** 58 | * @property {number} type - The const type of this object. 59 | * @readonly 60 | */ 61 | this.type = 314598722; 62 | 63 | /** 64 | * @property {number} z - The z-depth value of this object within its Group (remember the World is a Group as well). No two objects in a Group can have the same z value. 65 | */ 66 | this.z = 0; 67 | 68 | CreaturePackRenderer.call(this, pack_data_in, texture); 69 | 70 | this.position.set(x, y); 71 | 72 | /** 73 | * @property {Phaser.Point} world - The world coordinates of this Image. This differs from the x/y coordinates which are relative to the Images container. 74 | */ 75 | this.world = new Phaser.Point(x, y); 76 | }; 77 | 78 | Phaser.CreaturePackDraw.prototype = Object.create(CreaturePackRenderer.prototype); 79 | Phaser.CreaturePackDraw.prototype.constructor = Phaser.CreaturePackDraw; 80 | 81 | Phaser.CreaturePackDraw.prototype.preUpdate = function() { 82 | }; 83 | 84 | Phaser.CreaturePackDraw.prototype.update = function() { 85 | this.pack_renderer.stepTime(this.timeDelta); 86 | this.UpdateData(); 87 | }; 88 | 89 | Phaser.CreaturePackDraw.prototype.postUpdate = function() { 90 | }; 91 | 92 | 93 | -------------------------------------------------------------------------------- /CreaturePhaserRenderer.js: -------------------------------------------------------------------------------- 1 | /****************************************************************************** 2 | * Creature Runtimes License 3 | * 4 | * Copyright (c) 2015, Kestrel Moon Studios 5 | * All rights reserved. 6 | * 7 | * Preamble: This Agreement governs the relationship between Licensee and Kestrel Moon Studios(Hereinafter: Licensor). 8 | * This Agreement sets the terms, rights, restrictions and obligations on using [Creature Runtimes] (hereinafter: The Software) created and owned by Licensor, 9 | * as detailed herein: 10 | * License Grant: Licensor hereby grants Licensee a Sublicensable, Non-assignable & non-transferable, Commercial, Royalty free, 11 | * Including the rights to create but not distribute derivative works, Non-exclusive license, all with accordance with the terms set forth and 12 | * other legal restrictions set forth in 3rd party software used while running Software. 13 | * Limited: Licensee may use Software for the purpose of: 14 | * Running Software on Licensee’s Website[s] and Server[s]; 15 | * Allowing 3rd Parties to run Software on Licensee’s Website[s] and Server[s]; 16 | * Publishing Software’s output to Licensee and 3rd Parties; 17 | * Distribute verbatim copies of Software’s output (including compiled binaries); 18 | * Modify Software to suit Licensee’s needs and specifications. 19 | * Binary Restricted: Licensee may sublicense Software as a part of a larger work containing more than Software, 20 | * distributed solely in Object or Binary form under a personal, non-sublicensable, limited license. Such redistribution shall be limited to unlimited codebases. 21 | * Non Assignable & Non-Transferable: Licensee may not assign or transfer his rights and duties under this license. 22 | * Commercial, Royalty Free: Licensee may use Software for any purpose, including paid-services, without any royalties 23 | * Including the Right to Create Derivative Works: Licensee may create derivative works based on Software, 24 | * including amending Software’s source code, modifying it, integrating it into a larger work or removing portions of Software, 25 | * as long as no distribution of the derivative works is made 26 | * 27 | * THE RUNTIMES IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 28 | * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 29 | * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 30 | * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 31 | * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 32 | * OUT OF OR IN CONNECTION WITH THE RUNTIMES OR THE USE OR OTHER DEALINGS IN THE 33 | * RUNTIMES. 34 | *****************************************************************************/ 35 | 36 | Phaser.CreatureDraw = function (game, x, y, manager, texture) { 37 | x = x || 0; 38 | y = y || 0; 39 | 40 | /** 41 | * @property {Phaser.Game} game - A reference to the currently running Game. 42 | */ 43 | this.game = game; 44 | 45 | 46 | /** 47 | * @property {number} timeDelta - How quickly the animation time/playback advances 48 | */ 49 | this.timeDelta = 0.05; 50 | 51 | /** 52 | * @property {string} name - The user defined name given to this Image. 53 | * @default 54 | */ 55 | this.name = ''; 56 | 57 | /** 58 | * @property {number} type - The const type of this object. 59 | * @readonly 60 | */ 61 | this.type = 314598723; //Phaser.CREATUREDRAW; 62 | 63 | /** 64 | * @property {number} z - The z-depth value of this object within its Group (remember the World is a Group as well). No two objects in a Group can have the same z value. 65 | */ 66 | this.z = 0; 67 | 68 | CreatureRenderer.call(this, manager, texture); 69 | 70 | this.position.set(x, y); 71 | 72 | /** 73 | * @property {Phaser.Point} world - The world coordinates of this Image. This differs from the x/y coordinates which are relative to the Images container. 74 | */ 75 | this.world = new Phaser.Point(x, y); 76 | 77 | // Creature manager, internal value 78 | this._manager = manager; 79 | }; 80 | 81 | Phaser.CreatureDraw.prototype = Object.create(CreatureRenderer.prototype); 82 | Phaser.CreatureDraw.prototype.constructor = Phaser.CreatureDraw; 83 | 84 | Phaser.CreatureDraw.prototype.preUpdate = function() { 85 | }; 86 | 87 | Phaser.CreatureDraw.prototype.update = function() { 88 | this._manager.Update(this.timeDelta); 89 | this.UpdateData(); 90 | }; 91 | 92 | Phaser.CreatureDraw.prototype.postUpdate = function() { 93 | }; 94 | 95 | 96 | -------------------------------------------------------------------------------- /CreaturePixiJSRefRenderer.js: -------------------------------------------------------------------------------- 1 | /****************************************************************************** 2 | * Creature Runtimes License 3 | * 4 | * Copyright (c) 2015, Kestrel Moon Studios 5 | * All rights reserved. 6 | * 7 | * Preamble: This Agreement governs the relationship between Licensee and Kestrel Moon Studios(Hereinafter: Licensor). 8 | * This Agreement sets the terms, rights, restrictions and obligations on using [Creature Runtimes] (hereinafter: The Software) created and owned by Licensor, 9 | * as detailed herein: 10 | * License Grant: Licensor hereby grants Licensee a Sublicensable, Non-assignable & non-transferable, Commercial, Royalty free, 11 | * Including the rights to create but not distribute derivative works, Non-exclusive license, all with accordance with the terms set forth and 12 | * other legal restrictions set forth in 3rd party software used while running Software. 13 | * Limited: Licensee may use Software for the purpose of: 14 | * Running Software on Licensee’s Website[s] and Server[s]; 15 | * Allowing 3rd Parties to run Software on Licensee’s Website[s] and Server[s]; 16 | * Publishing Software’s output to Licensee and 3rd Parties; 17 | * Distribute verbatim copies of Software’s output (including compiled binaries); 18 | * Modify Software to suit Licensee’s needs and specifications. 19 | * Binary Restricted: Licensee may sublicense Software as a part of a larger work containing more than Software, 20 | * distributed solely in Object or Binary form under a personal, non-sublicensable, limited license. Such redistribution shall be limited to unlimited codebases. 21 | * Non Assignable & Non-Transferable: Licensee may not assign or transfer his rights and duties under this license. 22 | * Commercial, Royalty Free: Licensee may use Software for any purpose, including paid-services, without any royalties 23 | * Including the Right to Create Derivative Works: Licensee may create derivative works based on Software, 24 | * including amending Software’s source code, modifying it, integrating it into a larger work or removing portions of Software, 25 | * as long as no distribution of the derivative works is made 26 | * 27 | * THE RUNTIMES IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 28 | * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 29 | * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 30 | * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 31 | * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 32 | * OUT OF OR IN CONNECTION WITH THE RUNTIMES OR THE USE OR OTHER DEALINGS IN THE 33 | * RUNTIMES. 34 | *****************************************************************************/ 35 | 36 | function CreatureRenderer(manager_in, texture_in) 37 | { 38 | this.creature_manager = manager_in; 39 | var target_creature = this.creature_manager.target_creature; 40 | var mIndices = new Uint16Array(target_creature.global_indices.length); 41 | for(var i = 0; i < mIndices.length; i++) 42 | { 43 | mIndices[i] = target_creature.global_indices[i]; 44 | } 45 | 46 | PIXI.SimpleMesh.call( 47 | this, 48 | texture_in, 49 | new Float32Array(target_creature.total_num_pts * 2), 50 | new Float32Array(target_creature.total_num_pts * 2), 51 | mIndices, 52 | PIXI.DRAW_MODES.TRIANGLES); 53 | 54 | this.geometry.indexBuffer.static = false; 55 | this.blendMode = PIXI.BLEND_MODES.NORMAL; 56 | this.creatureBoundsMin = new PIXI.Point(0,0); 57 | this.creatureBoundsMax = new PIXI.Point(0,0); 58 | 59 | this.colors = new Float32Array([1,1,1,1]); 60 | this.UpdateRenderData(target_creature.global_pts, target_creature.global_uvs); 61 | }; 62 | 63 | // constructor 64 | CreatureRenderer.prototype = Object.create(PIXI.SimpleMesh.prototype); 65 | CreatureRenderer.prototype.constructor = CreatureRenderer; 66 | 67 | 68 | CreatureRenderer.prototype.UpdateCreatureBounds = function() 69 | { 70 | // update bounds based off world transform matrix 71 | var target_creature = this.creature_manager.target_creature; 72 | 73 | target_creature.ComputeBoundaryMinMax(); 74 | this.creatureBoundsMin.set(target_creature.boundary_min[0], 75 | -target_creature.boundary_min[1]); 76 | this.creatureBoundsMax.set(target_creature.boundary_max[0], 77 | -target_creature.boundary_max[1]); 78 | 79 | 80 | this.worldTransform.apply(this.creatureBoundsMin, this.creatureBoundsMin); 81 | this.worldTransform.apply(this.creatureBoundsMax, this.creatureBoundsMax); 82 | }; 83 | 84 | CreatureRenderer.prototype.GetPixelScaling = function(desired_x, desired_y) 85 | { 86 | // compute pixel scaling relative to mesh scaling 87 | var target_creature = this.creature_manager.target_creature; 88 | target_creature.ComputeBoundaryMinMax(); 89 | 90 | var mesh_size_x = target_creature.boundary_max[0] - target_creature.boundary_min[0]; 91 | var mesh_size_y = target_creature.boundary_max[1] - target_creature.boundary_min[1]; 92 | 93 | var scale_x = 1.0 / mesh_size_x * desired_x; 94 | var scale_y = 1.0 / mesh_size_y * desired_y; 95 | 96 | return [scale_x, scale_y]; 97 | }; 98 | 99 | CreatureRenderer.prototype.refresh = function() 100 | { 101 | var target_creature = this.creature_manager.target_creature; 102 | 103 | var read_pts = target_creature.render_pts; 104 | var read_uvs = target_creature.global_uvs; 105 | 106 | this.UpdateRenderData(read_pts, read_uvs); 107 | this.UpdateCreatureBounds(); 108 | 109 | var setUVs = this.geometry.getBuffer('aTextureCoord'); 110 | setUVs.update(); 111 | this.autoUpdate = true; 112 | }; 113 | 114 | CreatureRenderer.prototype.EnableSkinSwap = function(swap_name_in, active) 115 | { 116 | var target_creature = this.creature_manager.target_creature; 117 | target_creature.EnableSkinSwap(swap_name_in, active); 118 | 119 | var setIndices = this.geometry.indexBuffer.data; 120 | setIndices = new Uint16Array(target_creature.final_skin_swap_indices.length); 121 | for(var i = 0; i < setIndices.length; i++) 122 | { 123 | setIndices[i] = target_creature.final_skin_swap_indices[i]; 124 | } 125 | this.geometry.indexBuffer.update(); 126 | }; 127 | 128 | CreatureRenderer.prototype.DisableSkinSwap = function() 129 | { 130 | var target_creature = this.creature_manager.target_creature; 131 | target_creature.DisableSkinSwap(); 132 | var setIndices = this.geometry.indexBuffer.data; 133 | setIndices = new Uint16Array(target_creature.global_indices.length); 134 | for(var i = 0; i < setIndices.length; i++) 135 | { 136 | setIndices[i] = target_creature.global_indices[i]; 137 | } 138 | this.geometry.indexBuffer.update(); 139 | }; 140 | 141 | CreatureRenderer.prototype.UpdateRenderData = function(inputVerts, inputUVs) 142 | { 143 | var target_creature = this.creature_manager.target_creature; 144 | 145 | var pt_index = 0; 146 | var uv_index = 0; 147 | 148 | var write_pt_index = 0; 149 | var setUVs = this.geometry.getBuffer('aTextureCoord').data; 150 | 151 | for(var i = 0; i < target_creature.total_num_pts; i++) 152 | { 153 | this.vertices[write_pt_index] = inputVerts[pt_index]; 154 | this.vertices[write_pt_index + 1] = -inputVerts[pt_index + 1]; 155 | 156 | setUVs[uv_index] = inputUVs[uv_index]; 157 | setUVs[uv_index + 1] = inputUVs[uv_index + 1]; 158 | 159 | pt_index += 3; 160 | uv_index += 2; 161 | 162 | write_pt_index += 2; 163 | } 164 | }; 165 | -------------------------------------------------------------------------------- /CreatureThreeJSPackRenderer.js: -------------------------------------------------------------------------------- 1 | /****************************************************************************** 2 | * Creature Runtimes License 3 | * 4 | * Copyright (c) 2015, Kestrel Moon Studios 5 | * All rights reserved. 6 | * 7 | * Preamble: This Agreement governs the relationship between Licensee and Kestrel Moon Studios(Hereinafter: Licensor). 8 | * This Agreement sets the terms, rights, restrictions and obligations on using [Creature Runtimes] (hereinafter: The Software) created and owned by Licensor, 9 | * as detailed herein: 10 | * License Grant: Licensor hereby grants Licensee a Sublicensable, Non-assignable & non-transferable, Commercial, Royalty free, 11 | * Including the rights to create but not distribute derivative works, Non-exclusive license, all with accordance with the terms set forth and 12 | * other legal restrictions set forth in 3rd party software used while running Software. 13 | * Limited: Licensee may use Software for the purpose of: 14 | * Running Software on Licensee’s Website[s] and Server[s]; 15 | * Allowing 3rd Parties to run Software on Licensee’s Website[s] and Server[s]; 16 | * Publishing Software’s output to Licensee and 3rd Parties; 17 | * Distribute verbatim copies of Software’s output (including compiled binaries); 18 | * Modify Software to suit Licensee’s needs and specifications. 19 | * Binary Restricted: Licensee may sublicense Software as a part of a larger work containing more than Software, 20 | * distributed solely in Object or Binary form under a personal, non-sublicensable, limited license. Such redistribution shall be limited to unlimited codebases. 21 | * Non Assignable & Non-Transferable: Licensee may not assign or transfer his rights and duties under this license. 22 | * Commercial, Royalty Free: Licensee may use Software for any purpose, including paid-services, without any royalties 23 | * Including the Right to Create Derivative Works: Licensee may create derivative works based on Software, 24 | * including amending Software’s source code, modifying it, integrating it into a larger work or removing portions of Software, 25 | * as long as no distribution of the derivative works is made 26 | * 27 | * THE RUNTIMES IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 28 | * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 29 | * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 30 | * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 31 | * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 32 | * OUT OF OR IN CONNECTION WITH THE RUNTIMES OR THE USE OR OTHER DEALINGS IN THE 33 | * RUNTIMES. 34 | *****************************************************************************/ 35 | 36 | function CreaturePackRenderer(name, scene, pack_data_in, texture_in) 37 | { 38 | this.pack_data = pack_data_in; 39 | this.pack_renderer = new CreatureHaxeBaseRenderer(this.pack_data); 40 | this.texture = texture_in; 41 | this.scene = scene; 42 | this.name = name; 43 | this.normals = []; 44 | 45 | this.renderMesh = null; 46 | 47 | if(this.renderMesh == null) 48 | { 49 | var geometry = new THREE.BufferGeometry(); 50 | var material = this.texture; 51 | 52 | var pts_size = this.pack_renderer.render_points.length / 2 * 3; // 2D to 3D pts for ThreeJS 53 | var vertices = new Float32Array(pts_size); 54 | var normals = new Float32Array(pts_size); 55 | var uvs = new Float32Array(this.pack_renderer.render_uvs.length); 56 | var indices = new Uint32Array(this.pack_data.indices.length); 57 | 58 | for(var i = 0; i < vertices.length; i+=3) 59 | { 60 | vertices[i] = this.pack_data.points[i / 3 * 2]; 61 | vertices[i + 1] = this.pack_data.points[i / 3 * 2 + 1]; 62 | vertices[i + 2]; 63 | } 64 | 65 | for(var i = 0; i < uvs.length; i+=2) 66 | { 67 | uvs[i] = this.pack_data.uvs[i]; 68 | uvs[i + 1] = 1.0 - this.pack_data.uvs[i + 1]; 69 | } 70 | 71 | // topology 72 | for(var i = 0; i < indices.length; i++) 73 | { 74 | indices[i] = this.pack_data.indices[i]; 75 | } 76 | 77 | // normals 78 | for(var i = 0; i < normals.length; i+=3) 79 | { 80 | normals[i] = 0.0; 81 | normals[i + 1] = 1.0; 82 | normals[i + 2] = 0.0; 83 | } 84 | 85 | /* 86 | // colors 87 | for(var i = 0; i < target_creature.total_num_pts * 4; i+=4) 88 | { 89 | var cur_color = new THREE.Color(0xffffff); 90 | cur_color.setRGB(1,1,1); 91 | geometry.colors.push(cur_color); 92 | } 93 | */ 94 | 95 | geometry.setIndex( new THREE.BufferAttribute( indices, 1 ) ); 96 | geometry.addAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) ); 97 | geometry.addAttribute( 'normal', new THREE.BufferAttribute( normals, 3 ) ); 98 | geometry.addAttribute( 'uv', new THREE.BufferAttribute( uvs, 2 ) ); 99 | 100 | this.renderMesh = new THREE.Mesh(geometry, material); 101 | scene.add(this.renderMesh); 102 | 103 | this.renderMesh.geometry.computeFaceNormals(); 104 | this.renderMesh.geometry.computeVertexNormals(); 105 | 106 | this.renderMesh.geometry.elementsNeedUpdate = true; 107 | this.renderMesh.geometry.normalsNeedUpdate = true; 108 | //this.renderMesh.geometry.colorsNeedUpdate = true; 109 | material.needsUpdate = true; 110 | this.renderMesh.geometry.verticesNeedUpdate = true; 111 | this.renderMesh.geometry.uvsNeedUpdate = true; 112 | this.renderMesh.geometry.buffersNeedUpdate = true; 113 | } 114 | 115 | }; 116 | 117 | CreaturePackRenderer.prototype.UpdateRenderData = function() 118 | { 119 | set_vertices = this.renderMesh.geometry.getAttribute("position"); 120 | set_vertices.needsUpdate = true; 121 | 122 | set_uvs = this.renderMesh.geometry.getAttribute("uv"); 123 | set_uvs.needsUpdate = true; 124 | 125 | var j = 0; 126 | for(var i = 0; i < this.pack_renderer.render_points.length; i+=2) 127 | { 128 | set_vertices.array[j] = this.pack_renderer.render_points[i]; 129 | set_vertices.array[j + 1] = this.pack_renderer.render_points[i + 1]; 130 | j += 3; 131 | 132 | set_uvs.array[i] = this.pack_renderer.render_uvs[i]; 133 | set_uvs.array[i + 1] = 1.0 - this.pack_renderer.render_uvs[i + 1]; 134 | } 135 | 136 | this.renderMesh.geometry.verticesNeedUpdate = true; 137 | this.renderMesh.geometry.uvsNeedUpdate = true; 138 | }; 139 | 140 | 141 | CreaturePackRenderer.prototype.UpdateData = function() 142 | { 143 | this.pack_renderer.syncRenderData(); 144 | this.UpdateRenderData(); 145 | }; 146 | -------------------------------------------------------------------------------- /CreatureThreeJSRenderer.js: -------------------------------------------------------------------------------- 1 | /****************************************************************************** 2 | * Creature Runtimes License 3 | * 4 | * Copyright (c) 2015, Kestrel Moon Studios 5 | * All rights reserved. 6 | * 7 | * Preamble: This Agreement governs the relationship between Licensee and Kestrel Moon Studios(Hereinafter: Licensor). 8 | * This Agreement sets the terms, rights, restrictions and obligations on using [Creature Runtimes] (hereinafter: The Software) created and owned by Licensor, 9 | * as detailed herein: 10 | * License Grant: Licensor hereby grants Licensee a Sublicensable, Non-assignable & non-transferable, Commercial, Royalty free, 11 | * Including the rights to create but not distribute derivative works, Non-exclusive license, all with accordance with the terms set forth and 12 | * other legal restrictions set forth in 3rd party software used while running Software. 13 | * Limited: Licensee may use Software for the purpose of: 14 | * Running Software on Licensee’s Website[s] and Server[s]; 15 | * Allowing 3rd Parties to run Software on Licensee’s Website[s] and Server[s]; 16 | * Publishing Software’s output to Licensee and 3rd Parties; 17 | * Distribute verbatim copies of Software’s output (including compiled binaries); 18 | * Modify Software to suit Licensee’s needs and specifications. 19 | * Binary Restricted: Licensee may sublicense Software as a part of a larger work containing more than Software, 20 | * distributed solely in Object or Binary form under a personal, non-sublicensable, limited license. Such redistribution shall be limited to unlimited codebases. 21 | * Non Assignable & Non-Transferable: Licensee may not assign or transfer his rights and duties under this license. 22 | * Commercial, Royalty Free: Licensee may use Software for any purpose, including paid-services, without any royalties 23 | * Including the Right to Create Derivative Works: Licensee may create derivative works based on Software, 24 | * including amending Software’s source code, modifying it, integrating it into a larger work or removing portions of Software, 25 | * as long as no distribution of the derivative works is made 26 | * 27 | * THE RUNTIMES IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 28 | * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 29 | * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 30 | * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 31 | * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 32 | * OUT OF OR IN CONNECTION WITH THE RUNTIMES OR THE USE OR OTHER DEALINGS IN THE 33 | * RUNTIMES. 34 | *****************************************************************************/ 35 | 36 | function CreatureRenderer(name, scene, manager_in, texture_in) 37 | { 38 | this.creature_manager = manager_in; 39 | this.texture = texture_in; 40 | this.scene = scene; 41 | this.name = name; 42 | this.normals = []; 43 | 44 | this.renderMesh = null; 45 | 46 | if(this.renderMesh == null) 47 | { 48 | var target_creature = this.creature_manager.target_creature; 49 | var geometry = new THREE.BufferGeometry(); 50 | var material = this.texture; 51 | 52 | var vertices = new Float32Array(target_creature.total_num_pts * 3 ); 53 | var normals = new Float32Array(target_creature.total_num_pts * 3 ); 54 | var uvs = new Float32Array(target_creature.total_num_pts * 2 ); 55 | var indices = new Uint32Array(target_creature.global_indices.length); 56 | 57 | // topology 58 | for(var i = 0; i < target_creature.global_indices.length; i++) 59 | { 60 | indices[i] = target_creature.global_indices[i]; 61 | } 62 | 63 | // points 64 | for(var i = 0; i < target_creature.total_num_pts * 3; i++) 65 | { 66 | vertices[i] = target_creature.global_pts[i]; 67 | } 68 | 69 | // uvs 70 | for(var i = 0; i < target_creature.total_num_pts * 2; i++) 71 | { 72 | uvs[i] = target_creature.global_uvs[i]; 73 | } 74 | 75 | // normals 76 | for(var i = 0; i < target_creature.total_num_pts * 3; i+=3) 77 | { 78 | normals[i] = 0.0; 79 | normals[i + 1] = 0.0; 80 | normals[i + 2] = 0.0; 81 | } 82 | 83 | /* 84 | // colors 85 | for(var i = 0; i < target_creature.total_num_pts * 4; i+=4) 86 | { 87 | var cur_color = new THREE.Color(0xffffff); 88 | cur_color.setRGB(1,1,1); 89 | geometry.colors.push(cur_color); 90 | } 91 | */ 92 | 93 | geometry.setIndex( new THREE.BufferAttribute( indices, 1 ) ); 94 | geometry.addAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) ); 95 | geometry.addAttribute( 'normal', new THREE.BufferAttribute( normals, 3 ) ); 96 | geometry.addAttribute( 'uv', new THREE.BufferAttribute( uvs, 2 ) ); 97 | 98 | this.renderMesh = new THREE.Mesh(geometry, material); 99 | scene.add(this.renderMesh); 100 | 101 | this.renderMesh.geometry.computeFaceNormals(); 102 | this.renderMesh.geometry.computeVertexNormals(); 103 | 104 | this.renderMesh.geometry.elementsNeedUpdate = true; 105 | this.renderMesh.geometry.normalsNeedUpdate = true; 106 | //this.renderMesh.geometry.colorsNeedUpdate = true; 107 | material.needsUpdate = true; 108 | this.renderMesh.geometry.verticesNeedUpdate = true; 109 | this.renderMesh.geometry.uvsNeedUpdate = true; 110 | this.renderMesh.geometry.buffersNeedUpdate = true; 111 | } 112 | 113 | }; 114 | 115 | 116 | CreatureRenderer.prototype.UpdateData = function() 117 | { 118 | var target_creature = this.creature_manager.target_creature; 119 | 120 | var read_pts = target_creature.render_pts; 121 | //var read_pts = target_creature.global_pts; 122 | var read_uvs = target_creature.global_uvs; 123 | var read_colours = target_creature.render_colours; 124 | 125 | // points 126 | var index = 0; 127 | set_vertices = this.renderMesh.geometry.getAttribute("position"); 128 | set_vertices.needsUpdate = true; 129 | for(var i = 0; i < target_creature.total_num_pts * 3; i++) 130 | { 131 | set_vertices.array[i] = target_creature.render_pts[i]; 132 | } 133 | 134 | // uvs 135 | set_uvs = this.renderMesh.geometry.getAttribute("uv"); 136 | set_uvs.needsUpdate = true; 137 | for(var i = 0; i < target_creature.total_num_pts * 2; i+=2) 138 | { 139 | set_uvs.array[i] = target_creature.global_uvs[i]; 140 | set_uvs.array[i + 1] = 1.0 - target_creature.global_uvs[i + 1]; 141 | } 142 | 143 | this.renderMesh.geometry.verticesNeedUpdate = true; 144 | this.renderMesh.geometry.uvsNeedUpdate = true; 145 | }; 146 | -------------------------------------------------------------------------------- /Phaser3/CreaturePackPhaser3Obj.js: -------------------------------------------------------------------------------- 1 | /****************************************************************************** 2 | * Creature Runtimes License 3 | * 4 | * Copyright (c) 2015, Kestrel Moon Studios 5 | * All rights reserved. 6 | * 7 | * Preamble: This Agreement governs the relationship between Licensee and Kestrel Moon Studios(Hereinafter: Licensor). 8 | * This Agreement sets the terms, rights, restrictions and obligations on using [Creature Runtimes] (hereinafter: The Software) created and owned by Licensor, 9 | * as detailed herein: 10 | * License Grant: Licensor hereby grants Licensee a Sublicensable, Non-assignable & non-transferable, Commercial, Royalty free, 11 | * Including the rights to create but not distribute derivative works, Non-exclusive license, all with accordance with the terms set forth and 12 | * other legal restrictions set forth in 3rd party software used while running Software. 13 | * Limited: Licensee may use Software for the purpose of: 14 | * Running Software on Licensee’s Website[s] and Server[s]; 15 | * Allowing 3rd Parties to run Software on Licensee’s Website[s] and Server[s]; 16 | * Publishing Software’s output to Licensee and 3rd Parties; 17 | * Distribute verbatim copies of Software’s output (including compiled binaries); 18 | * Modify Software to suit Licensee’s needs and specifications. 19 | * Binary Restricted: Licensee may sublicense Software as a part of a larger work containing more than Software, 20 | * distributed solely in Object or Binary form under a personal, non-sublicensable, limited license. Such redistribution shall be limited to unlimited codebases. 21 | * Non Assignable & Non-Transferable: Licensee may not assign or transfer his rights and duties under this license. 22 | * Commercial, Royalty Free: Licensee may use Software for any purpose, including paid-services, without any royalties 23 | * Including the Right to Create Derivative Works: Licensee may create derivative works based on Software, 24 | * including amending Software’s source code, modifying it, integrating it into a larger work or removing portions of Software, 25 | * as long as no distribution of the derivative works is made 26 | * 27 | * THE RUNTIMES IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 28 | * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 29 | * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 30 | * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 31 | * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 32 | * OUT OF OR IN CONNECTION WITH THE RUNTIMES OR THE USE OR OTHER DEALINGS IN THE 33 | * RUNTIMES. 34 | *****************************************************************************/ 35 | 36 | class CreaturePackObj extends Phaser.GameObjects.Mesh { 37 | constructor(scene, x, y, byte_data_in, texture_key, panZVal=7) { 38 | super( 39 | scene, 40 | x, 41 | y, 42 | texture_key 43 | ); 44 | this.speed = 0.05; 45 | 46 | var byte_array = new Uint8Array(byte_data_in); 47 | this.pack_data = new CreaturePackLoader(byte_array.buffer); 48 | 49 | this.pack_renderer = new CreatureHaxeBaseRenderer(this.pack_data); 50 | this.pack_renderer.stepTime(0); 51 | this.pack_renderer.syncRenderData(); 52 | 53 | var indices = this.pack_data.indices; 54 | 55 | var render_pts = this.pack_renderer.render_points; 56 | var render_uvs = this.pack_renderer.render_uvs; 57 | var render_colors = this.pack_renderer.render_colors; 58 | 59 | var create_vertices = new Float32Array(render_pts.length); 60 | var create_uvs = new Float32Array(render_uvs.length); 61 | var create_colors = new Uint32Array(render_pts.length); 62 | var create_alphas = new Float32Array(render_pts.length); 63 | 64 | for(var i = 0; i < create_colors.length; i++) 65 | { 66 | create_colors[i] = 0xFFFFFF; 67 | } 68 | 69 | for(var i = 0; i < create_alphas.length; i++) 70 | { 71 | create_alphas[i] = 1.0; 72 | } 73 | 74 | 75 | this.addVertices(render_pts, render_uvs, indices); 76 | this.ignoreDirtyCache = true; 77 | this.panZ(panZVal); 78 | scene.add.existing(this); 79 | } 80 | getPackRGBA(r, g, b, a) { 81 | var ur = ((r * 255.0)|0) & 0xFF; 82 | var ug = ((g * 255.0)|0) & 0xFF; 83 | var ub = ((b * 255.0)|0) & 0xFF; 84 | var ua = ((a * 255.0)|0) & 0xFF; 85 | return ((ua << 24) | (ur << 16) | (ug << 8) | ub) >>> 0; 86 | } 87 | preUpdate(time, delta){ 88 | super.preUpdate(time, delta); 89 | 90 | this.pack_renderer.stepTime(delta * this.speed); 91 | this.pack_renderer.syncRenderData(); 92 | 93 | const indices = this.pack_data.indices; 94 | const render_pts = this.pack_renderer.render_points; 95 | const render_uvs = this.pack_renderer.render_uvs; 96 | const render_colors = this.pack_renderer.render_colors; 97 | 98 | // Unfortunately, Phaser still does not have a proper efficient way of rendering meshes with indices 99 | // It seems Phase still "unrolls" the mesh without any considerations for vertices sharing multiple indices 100 | // This means indices.length == this.getVertexCount() which is not good for performance 101 | for(var i = 0; i < indices.length; i++) 102 | { 103 | var cVertex = this.vertices[i]; 104 | var idx = indices[i] * 2; 105 | cVertex.x = render_pts[idx]; 106 | cVertex.y = render_pts[idx + 1]; 107 | 108 | cVertex.u = render_uvs[idx]; 109 | cVertex.v = render_uvs[idx + 1]; 110 | 111 | var r = render_colors[indices[i] * 4]; 112 | var g = render_colors[indices[i] * 4]; 113 | var b = render_colors[indices[i] * 4]; 114 | cVertex.colors = this.getPackRGBA(r, g, b, 1); 115 | cVertex.alphas = render_colors[indices[i] * 4 + 3]; 116 | } 117 | } 118 | } -------------------------------------------------------------------------------- /Phaser3/Phaser3BasicGroup.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 82 | 83 | 84 | -------------------------------------------------------------------------------- /Phaser3/Phaser3BasicSample.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 62 | 63 | 64 | -------------------------------------------------------------------------------- /Phaser3/Phaser3Composer.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /Phaser3/Phaser3Flamingo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 60 | 61 | 62 | -------------------------------------------------------------------------------- /Phaser3/README.md: -------------------------------------------------------------------------------- 1 | # CreaturePack Runtimes for Phaser 3 2 | 3 | This folder contains the **CreaturePack** high performance + compression runtimes for [Phaser 3](https://phaser.io/phaser3) 4 | You will need to export your animations usint the [Creature Animation Tool](https://creature.kestrelmoon.com/) to use these runtimes. 5 | 6 | ![Alt text](https://github.com/kestrelm/Creature_WebGL/blob/master/Phaser3/title.png) 7 | 8 | ## Detailed Writeup 9 | 10 | ![Alt tet](https://cdn-images-1.medium.com/max/1200/1*lbKI11CHM2W41r6ehl_Z8A.gif) 11 | 12 | A full writeup on how author a walking Flamingo animation asset from scratch using this runtime is available [here as well](https://medium.com/@kestrelm/2d-skeletal-animation-in-phaser-3-tutorial-3ed468fb6bd0) 13 | 14 | ## Usage 15 | 16 | Using this runtime is super simple! Take a look at **Phaser3BasicGroup.html** for a quick introduction. 17 | 18 | First, you will need to load your **creature pack binary** as well as the character's **texture atlas png**: 19 | 20 | ``` 21 | function preload () 22 | { 23 | this.load.binary('char', '../fox2x.creature_pack'); 24 | this.load.image('texture', '../fox.png'); 25 | } 26 | ``` 27 | 28 | Now create your **CreaturePack character** and set its scale: 29 | ``` 30 | creature_char = this.make.CreaturePackObj({ 31 | byte_data_in: this.cache.binary.get('char'), 32 | texture_key: 'texture', 33 | x: 300, 34 | y: 300 35 | }); 36 | creature_char.scaleX = 15; 37 | creature_char.scaleY = 15; 38 | ``` 39 | 40 | And that's it! You can also do more with your character. To blend the animation, you can: 41 | 42 | ``` 43 | creature_char.pack_renderer.blendToAnimation("run", 0.03); // ( Animation Clip, Blend Speed from 0 to 1 ) 44 | ``` 45 | 46 | You can set the playback speed and more: 47 | 48 | ``` 49 | creature_char.speed = 0.1 50 | ``` 51 | 52 | Check out **CreaturePackModule.js** for the full API/set of functions you can call to control your character animations. -------------------------------------------------------------------------------- /Phaser3/title.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kestrelm/Creature_WebGL/3d7f3563d183eef165aefeb6a3fbd9669b9f78af/Phaser3/title.png -------------------------------------------------------------------------------- /Phasor-Demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | hello phaser! 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 179 | 180 | 181 | 182 | -------------------------------------------------------------------------------- /Phasor-Pack-Demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | hello phaser! 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 65 | 66 | 67 | 68 | -------------------------------------------------------------------------------- /PixiJSRef-Pack-Demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CreaturePack WebAssembly Demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 66 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /PixiJs-Demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | PixiJs - Basic scene 7 | 8 | 23 | 24 | 25 | 26 | 27 | 28 |

My First Web Page

29 | 30 |

My first paragraph.

31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 115 | 116 | 117 | -------------------------------------------------------------------------------- /PixiJs-SkinSwap-Demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | PixiJs - Basic scene 7 | 8 | 23 | 24 | 25 | 26 | 27 | 28 |

My First Web Page

29 | 30 |

My first paragraph.

31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 156 | 157 | 158 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Creature WebGL Game Engine Runtimes 2 | 3 | This repository contains the Creature Runtimes for Javascript and WebAssembly based Game Engine Frameworks. 4 | 5 | The following frameworks are supported: 6 | 7 | - **PixiJS** 8 | 9 | - **Phaser ( Both CE and 3 )** 10 | 11 | - **ThreeJS** 12 | 13 | - **BabylonJS** 14 | 15 | - **CocosCreator + Wechat Game Engine** 16 | 17 | For more information on how to use the runtimes, please head over to this [site](http://www.kestrelmoon.com/creaturedocs/Game_Engine_Runtimes_And_Integration/Runtimes_Introduction.html) 18 | 19 | The **Ice Demon** character sample Artwork is by: **Katarzyna Zalecka [http://kasia88.deviantart.com], Attribution-ShareAlike 3.0 Unported** 20 | 21 | Download the samples and more **[here](http://www.kestrelmoon.com/creaturedocs/Animation_Samples_And_Examples/Samples_And_Videos.html)**. 22 | 23 | ![Alt text](https://github.com/kestrelm/Creature_WebGL/blob/master/babylonjs.png) 24 | Live Babylon JS Demo is **[here](http://creature.kestrelmoon.com/WebDemo/Babylon-Demo.html)**. 25 | 26 | ## Live Raptor Mark Demo 27 | 28 | **Raptor Mark** is a demonstration of what the **Creature WebGL** plugin is capable of. 29 | 30 | ![Alt text](https://github.com/kestrelm/Creature_WebGL/blob/master/logo1.png) 31 | 32 | ### Regular JS Demo 33 | 34 | This demo shows **30 fully mesh deforming raptor characters** running across the screen. This demo is using the **CreaturePack Web** format to deliver results that have high performance, great quality and yet compact in delivery size. 35 | 36 | **UtahRaptor Artwork**: Emily Willoughby (http://emilywilloughby.com) 37 | 38 | View the Live demo **[here](http://www.kestrelmoon.com/creature/WebDemo/raptor_mark.html)** . 39 | 40 | ### WebAssembly Demo 41 | 42 | Unleash the power of high performance **Web Assembly** with the new **CreaturePack WebAssembly** runtimes! 43 | 44 | ![Alt text](https://github.com/kestrelm/Creature_WebGL/blob/master/babylonPack.png) 45 | The above demo uses advanced **Delta Compression** in CreaturePack to deliver high performance + quality animation with extreme compression ratios! This Raptor animation is **only 230KB in size**! 46 | 47 | View the Live CreaturePack BabylonJS WebAssembly demo **[here](https://creature.kestrelmoon.com/WebDemo/wasm/BabylonPack-Demo.html)** 48 | 49 | 50 | This second demo shows **200 (Not a Typo!!) mesh deforming raptor dinosaurs** running across the screen! The demo is using the **CreaturePack Web** format similar to the JS version to deliver results that have high performance, great quality and yet compact in delivery size. However, with the new **Web Assembly** backend, the playback is even faster, capable of handling huge numbers of characters running live on your web browser. Even on moderately equipped PCs, this demo runs at a fluid 60 FPS. Make sure your browser has been updated to the latest version to take advantage of this exciting runtime. 51 | 52 | View the Live CreaturePack WebAsseambly demo **[here](https://creature.kestrelmoon.com/WebDemo/wasm/PixiJS-WASM-Pack-MultiDemo.html)** :) 53 | 54 | Read the writeup on the WebAssembly runtime **[here]()** 55 | 56 | ### Share your animations easily with the CreaturePack WebAssembly Widget 57 | 58 | ![Alt text](https://github.com/kestrelm/Creature_WebGL/blob/master/packPlayer.png) 59 | 60 | The **CreaturePack WebAssembly Widget** allows you to easily share your exported Creature animations on your own personal webpage! The rendering core uses the powerful [**BabylonJS 3D WebGL Engine**](https://www.babylonjs.com/). This allows for beautiful rendering effects, including high quality soft-shadows and real-time 3D lighting. Head over to the **WebAssembly** folder for more info [**here**](https://github.com/kestrelm/Creature_WebGL/tree/master/wasm). 61 | 62 | ## License 63 | The **Creature Runtimes** operate under 2 License types depending on whether you own a Licensed copy of [Creature](https://creature.kestrelmoon.com) or not. 64 | - **People who own a licensed copy of Creature:** You use the standard **Creature License** included with the runtime code. **TLDR:** You are free to publish/modify/sell your product with the Creature runtimes without needing to state you are using the runtimes/put the copyright notice in your code/app. If you already have been using the Creature runtimes as a licensed owner of Creature, nothing changes :) 65 | 66 | - **Everyone else:** The runtimes are released under the very permissive [**Apache License**](https://choosealicense.com/licenses/apache-2.0/) :) 67 | 68 | ***Both Licenses allow for private use and do not require any disclosure of your source code.*** 69 | 70 | ## FAQ 71 | 72 | ### My character mesh in BabylonJS flickers/disappears 73 | This is a BabylyJS renderer issue and has to do with the bounding box of the character. You can try setting **mesh.alwaysSelectAsActiveMesh = true**. Or refresh the mesh data and bounding box each frame. Please read the thread [here](https://github.com/kestrelm/Creature_WebGL/issues/10) 74 | 75 | -------------------------------------------------------------------------------- /ThreeJS-Demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Three.js - Basic scene 7 | 8 | 19 | 20 | 21 | 22 | 23 | 24 |

My First Web Page

25 | 26 |

My first paragraph.

27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 121 | 122 | 123 | -------------------------------------------------------------------------------- /ThreeJS-PackDemo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Three.js - Basic scene 7 | 8 | 19 | 20 | 21 | 22 | 23 | 24 |

ThreeJS CreaturePack Sample

25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 99 | 100 | 101 | -------------------------------------------------------------------------------- /b64Encode.py: -------------------------------------------------------------------------------- 1 | import base64 2 | import sys 3 | import os 4 | 5 | if __name__== "__main__": 6 | if(len(sys.argv) != 3): 7 | print("Usage: ") 8 | 9 | readBytes = None 10 | with open(sys.argv[1], mode='rb') as file: # b is important -> binary 11 | readBytes = file.read() 12 | 13 | outputStr = base64.encodestring(readBytes) 14 | 15 | try: 16 | os.remove(sys.argv[2]) 17 | except: 18 | pass 19 | 20 | textfile = open(sys.argv[2], 'w') 21 | textfile.write(outputStr) 22 | textfile.close() 23 | 24 | print("Wrote to b64 text file: %s" %(sys.argv[2])) 25 | 26 | 27 | -------------------------------------------------------------------------------- /babylonPack.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kestrelm/Creature_WebGL/3d7f3563d183eef165aefeb6a3fbd9669b9f78af/babylonPack.png -------------------------------------------------------------------------------- /babylonjs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kestrelm/Creature_WebGL/3d7f3563d183eef165aefeb6a3fbd9669b9f78af/babylonjs.png -------------------------------------------------------------------------------- /bat.creature_pack: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kestrelm/Creature_WebGL/3d7f3563d183eef165aefeb6a3fbd9669b9f78af/bat.creature_pack -------------------------------------------------------------------------------- /bat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kestrelm/Creature_WebGL/3d7f3563d183eef165aefeb6a3fbd9669b9f78af/bat.png -------------------------------------------------------------------------------- /composer.creature_pack: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kestrelm/Creature_WebGL/3d7f3563d183eef165aefeb6a3fbd9669b9f78af/composer.creature_pack -------------------------------------------------------------------------------- /composer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kestrelm/Creature_WebGL/3d7f3563d183eef165aefeb6a3fbd9669b9f78af/composer.png -------------------------------------------------------------------------------- /flamingo.creature_pack: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kestrelm/Creature_WebGL/3d7f3563d183eef165aefeb6a3fbd9669b9f78af/flamingo.creature_pack -------------------------------------------------------------------------------- /flamingo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kestrelm/Creature_WebGL/3d7f3563d183eef165aefeb6a3fbd9669b9f78af/flamingo.png -------------------------------------------------------------------------------- /fox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kestrelm/Creature_WebGL/3d7f3563d183eef165aefeb6a3fbd9669b9f78af/fox.png -------------------------------------------------------------------------------- /fox0x.creature_pack: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kestrelm/Creature_WebGL/3d7f3563d183eef165aefeb6a3fbd9669b9f78af/fox0x.creature_pack -------------------------------------------------------------------------------- /fox2x.creature_pack: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kestrelm/Creature_WebGL/3d7f3563d183eef165aefeb6a3fbd9669b9f78af/fox2x.creature_pack -------------------------------------------------------------------------------- /fox4x.creature_pack: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kestrelm/Creature_WebGL/3d7f3563d183eef165aefeb6a3fbd9669b9f78af/fox4x.creature_pack -------------------------------------------------------------------------------- /horseman.creature_pack: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kestrelm/Creature_WebGL/3d7f3563d183eef165aefeb6a3fbd9669b9f78af/horseman.creature_pack -------------------------------------------------------------------------------- /horseman.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kestrelm/Creature_WebGL/3d7f3563d183eef165aefeb6a3fbd9669b9f78af/horseman.png -------------------------------------------------------------------------------- /iceDemonExport_character_data.bytes: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kestrelm/Creature_WebGL/3d7f3563d183eef165aefeb6a3fbd9669b9f78af/iceDemonExport_character_data.bytes -------------------------------------------------------------------------------- /iceDemonExport_character_img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kestrelm/Creature_WebGL/3d7f3563d183eef165aefeb6a3fbd9669b9f78af/iceDemonExport_character_img.png -------------------------------------------------------------------------------- /logo1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kestrelm/Creature_WebGL/3d7f3563d183eef165aefeb6a3fbd9669b9f78af/logo1.png -------------------------------------------------------------------------------- /packPlayer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kestrelm/Creature_WebGL/3d7f3563d183eef165aefeb6a3fbd9669b9f78af/packPlayer.png -------------------------------------------------------------------------------- /raptorNew.creature_pack: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kestrelm/Creature_WebGL/3d7f3563d183eef165aefeb6a3fbd9669b9f78af/raptorNew.creature_pack -------------------------------------------------------------------------------- /raptorNew.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kestrelm/Creature_WebGL/3d7f3563d183eef165aefeb6a3fbd9669b9f78af/raptorNew.png -------------------------------------------------------------------------------- /raptor_data.creature_pack: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kestrelm/Creature_WebGL/3d7f3563d183eef165aefeb6a3fbd9669b9f78af/raptor_data.creature_pack -------------------------------------------------------------------------------- /raptor_img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kestrelm/Creature_WebGL/3d7f3563d183eef165aefeb6a3fbd9669b9f78af/raptor_img.png -------------------------------------------------------------------------------- /red_texture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kestrelm/Creature_WebGL/3d7f3563d183eef165aefeb6a3fbd9669b9f78af/red_texture.png -------------------------------------------------------------------------------- /skinSwap_character_data_meta.mdata: -------------------------------------------------------------------------------- 1 | {"meshes":{"TextureMesh0":{"id":2,"startIndex":0,"endIndex":137},"TextureMesh1":{"id":3,"startIndex":138,"endIndex":611},"TextureMesh2":{"id":4,"startIndex":612,"endIndex":1307},"TextureMesh4":{"id":6,"startIndex":1308,"endIndex":2669},"TextureMesh5":{"id":7,"startIndex":2670,"endIndex":3215},"TextureMesh6":{"id":8,"startIndex":3216,"endIndex":3755},"TextureMesh7":{"id":9,"startIndex":3756,"endIndex":4463},"TextureMesh3":{"id":5,"startIndex":4464,"endIndex":5753}},"regionOrders":{"default0":[],"default":[]},"eventTriggers":{"default0":[],"default":[]},"skinSwapList":{"Default":{"swap":{"swap_items":["TextureMesh7","TextureMesh6","TextureMesh5"],"name":"Default"}},"Swap0":{"swap":{"swap_items":["TextureMesh1","TextureMesh0"],"name":"Swap0"}}},"physicsData":{"default0":{},"default":{"motor_22":["Bone_11","Bone_12","Bone_13","Bone_14"]}},"meshes":{"cape":{"id":13,"startIndex":0,"endIndex":815},"arm2":{"id":11,"startIndex":816,"endIndex":1067},"lowerHair":{"id":6,"startIndex":1068,"endIndex":1235},"torso":{"id":7,"startIndex":1236,"endIndex":2855},"dress":{"id":5,"startIndex":2856,"endIndex":5321},"sword":{"id":9,"startIndex":5322,"endIndex":5711},"upperHair":{"id":4,"startIndex":5712,"endIndex":5975},"gun":{"id":10,"startIndex":5976,"endIndex":6455},"arm1":{"id":8,"startIndex":6456,"endIndex":6707}},"regionOrders":{"cape":[],"dress":[],"default":[]},"eventTriggers":{"cape":[],"dress":[],"default":[]},"skinSwapList":{"Default":{"swap":{"swap_items":["arm2","upperHair","lowerHair","torso","arm1"],"name":"Default"}},"cape":{"swap":{"swap_items":["arm1","cape","arm2","gun","upperHair","lowerHair","torso"],"name":"cape"}},"defaultGun":{"swap":{"swap_items":["arm2","gun","torso","arm1","upperHair","lowerHair"],"name":"defaultGun"}},"dress":{"swap":{"swap_items":["arm2","torso","upperHair","lowerHair","dress","arm1"],"name":"dress"}},"dressSword":{"swap":{"swap_items":["arm2","lowerHair","torso","dress","arm1","upperHair","sword"],"name":"dressSword"}}},"physicsData":{"cape":{"motor_17":["Bone_42","Bone_43","Bone_44","Bone_45"],"motor_24":["Bone_38","Bone_39","Bone_40","Bone_41"],"motor_34":["Bone_34","Bone_35","Bone_36","Bone_37"],"motor_30":["Bone_30","Bone_31","Bone_32","Bone_33"],"motor_48":["Bone_47","Bone_48","Bone_49","Bone_50","Bone_51","Bone_52"],"motor_8":["Bone_59","Bone_60","Bone_61","Bone_62","Bone_63"],"motor_59":["Bone_53","Bone_54","Bone_55","Bone_56","Bone_57","Bone_58"],"motor_15":["Bone_28","Bone_29"],"motor_6":["Bone_19","Bone_20"]},"dress":{"motor_26":["Bone_43","Bone_44","Bone_45"],"motor_39":["Bone_39","Bone_40","Bone_41"],"motor_35":["Bone_35","Bone_36","Bone_37"],"motor_31":["Bone_31","Bone_32","Bone_33"],"motor_5":["Bone_27","Bone_28","Bone_29"],"motor_15":["Bone_24","Bone_25","Bone_26"],"motor_12":["Bone_19","Bone_20"]},"default":{"motor_15":["Bone_28","Bone_29"],"motor_6":["Bone_19","Bone_20"]}}} -------------------------------------------------------------------------------- /skinSwap_character_img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kestrelm/Creature_WebGL/3d7f3563d183eef165aefeb6a3fbd9669b9f78af/skinSwap_character_img.png -------------------------------------------------------------------------------- /wasm/BabylonPack-Demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | CreaturePack BabylonJS WebAssembly Demo 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 179 | 180 | 181 | 182 | -------------------------------------------------------------------------------- /wasm/CreaturePackBabylonWASMRenderer.js: -------------------------------------------------------------------------------- 1 | /****************************************************************************** 2 | * Creature Runtimes License 3 | * 4 | * Copyright (c) 2015, Kestrel Moon Studios 5 | * All rights reserved. 6 | * 7 | * Preamble: This Agreement governs the relationship between Licensee and Kestrel Moon Studios(Hereinafter: Licensor). 8 | * This Agreement sets the terms, rights, restrictions and obligations on using [Creature Runtimes] (hereinafter: The Software) created and owned by Licensor, 9 | * as detailed herein: 10 | * License Grant: Licensor hereby grants Licensee a Sublicensable, Non-assignable & non-transferable, Commercial, Royalty free, 11 | * Including the rights to create but not distribute derivative works, Non-exclusive license, all with accordance with the terms set forth and 12 | * other legal restrictions set forth in 3rd party software used while running Software. 13 | * Limited: Licensee may use Software for the purpose of: 14 | * Running Software on Licensee’s Website[s] and Server[s]; 15 | * Allowing 3rd Parties to run Software on Licensee’s Website[s] and Server[s]; 16 | * Publishing Software’s output to Licensee and 3rd Parties; 17 | * Distribute verbatim copies of Software’s output (including compiled binaries); 18 | * Modify Software to suit Licensee’s needs and specifications. 19 | * Binary Restricted: Licensee may sublicense Software as a part of a larger work containing more than Software, 20 | * distributed solely in Object or Binary form under a personal, non-sublicensable, limited license. Such redistribution shall be limited to unlimited codebases. 21 | * Non Assignable & Non-Transferable: Licensee may not assign or transfer his rights and duties under this license. 22 | * Commercial, Royalty Free: Licensee may use Software for any purpose, including paid-services, without any royalties 23 | * Including the Right to Create Derivative Works: Licensee may create derivative works based on Software, 24 | * including amending Software’s source code, modifying it, integrating it into a larger work or removing portions of Software, 25 | * as long as no distribution of the derivative works is made 26 | * 27 | * THE RUNTIMES IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 28 | * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 29 | * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 30 | * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 31 | * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 32 | * OUT OF OR IN CONNECTION WITH THE RUNTIMES OR THE USE OR OTHER DEALINGS IN THE 33 | * RUNTIMES. 34 | *****************************************************************************/ 35 | 36 | // CreaturePackBabylonRenderer 37 | function CreaturePackBabylonRenderer(name, scene, manager_in, loader_name_in, texture_in) 38 | { 39 | this.playerId = manager_in.addPackPlayer(loader_name_in); 40 | this.packManager = manager_in; 41 | this.texture = texture_in; 42 | this.scene = scene; 43 | this.name = name; 44 | this.normals = []; 45 | this.finalUVs = []; 46 | this.finalColors = []; 47 | this.regionOffsetsZ = -0.01; 48 | 49 | this.renderMesh = null; 50 | this.InitData(); 51 | }; 52 | 53 | CreaturePackBabylonRenderer.prototype.GetRuntime = function() 54 | { 55 | return this.packManager.getPlayerRunTime(this.playerId); 56 | }; 57 | 58 | CreaturePackBabylonRenderer.prototype.SetRuntime = function(time_in) 59 | { 60 | this.packManager.setPlayerRunTime(this.playerId, time_in); 61 | }; 62 | 63 | CreaturePackBabylonRenderer.prototype.GetActiveAnimName = function() 64 | { 65 | return this.packManager.getActiveAnimName(this.playerId); 66 | }; 67 | 68 | CreaturePackBabylonRenderer.prototype.GetActiveAnimStartTime = function() 69 | { 70 | return this.packManager.getActiveAnimStartTime(this.playerId); 71 | }; 72 | 73 | CreaturePackBabylonRenderer.prototype.GetActiveAnimEndTime = function() 74 | { 75 | return this.packManager.getActiveAnimEndTime(this.playerId); 76 | }; 77 | 78 | CreaturePackBabylonRenderer.prototype.InitData = function() 79 | { 80 | this.vertices = this.packManager.getPlayerPoints3D(this.playerId); 81 | 82 | this.totalPtNum = this.vertices.length / 3; 83 | this.uvs = this.packManager.getPlayerUVs(this.playerId); 84 | this.colors = this.packManager.getPlayerColors(this.playerId); 85 | 86 | var readIndices = this.packManager.getPlayerIndices(this.playerId); 87 | this.indices = readIndices; 88 | 89 | this.renderMesh = new BABYLON.Mesh(this.name, this.scene); 90 | this.renderMesh.setIndices(this.indices); 91 | this.renderMesh.material = this.texture; 92 | this.renderMesh.scaling = new BABYLON.Vector3(1, 1, 1); 93 | this.renderMesh.receiveShadoes = false; 94 | 95 | this.normals = []; 96 | 97 | for(var i = 0; i < this.totalPtNum; i++) 98 | { 99 | this.normals.push(0); 100 | this.normals.push(0); 101 | this.normals.push(-1); 102 | 103 | this.finalUVs.push(0); 104 | this.finalUVs.push(0); 105 | 106 | this.finalColors.push(1); 107 | this.finalColors.push(1); 108 | this.finalColors.push(1); 109 | this.finalColors.push(1); 110 | } 111 | 112 | this.renderMesh.setVerticesData(BABYLON.VertexBuffer.PositionKind, this.vertices, true); 113 | this.renderMesh.setVerticesData(BABYLON.VertexBuffer.UVKind, this.finalUVs, true); 114 | this.renderMesh.setVerticesData(BABYLON.VertexBuffer.ColorKind, this.finalColors, true); 115 | this.renderMesh.setVerticesData(BABYLON.VertexBuffer.NormalKind, this.normals, true); 116 | }; 117 | 118 | CreaturePackBabylonRenderer.prototype.UpdateData = function() 119 | { 120 | /* 121 | if(this.renderMesh == null) 122 | { 123 | this.InitData(); 124 | } 125 | */ 126 | 127 | var uvIdx = 0; 128 | var colorIdx = 0; 129 | for(var i = 0; i < this.totalPtNum; i++) 130 | { 131 | this.finalUVs[uvIdx] = this.uvs[uvIdx]; 132 | this.finalUVs[uvIdx + 1] = 1.0 - this.uvs[uvIdx + 1]; 133 | uvIdx += 2; 134 | 135 | this.finalColors[colorIdx] = this.colors[colorIdx] / 255.0; 136 | this.finalColors[colorIdx + 1] = this.colors[colorIdx] / 255.0; 137 | this.finalColors[colorIdx + 2] = this.colors[colorIdx] / 255.0; 138 | this.finalColors[colorIdx + 3] = this.colors[colorIdx] / 255.0; 139 | 140 | colorIdx += 4; 141 | } 142 | 143 | this.packManager.applyRegionOffsetsZ(this.playerId, this.regionOffsetsZ); 144 | 145 | this.renderMesh.updateVerticesData(BABYLON.VertexBuffer.PositionKind, this.vertices, true, false); 146 | this.renderMesh.updateVerticesData(BABYLON.VertexBuffer.UVKind, this.finalUVs, true, false); 147 | this.renderMesh.updateVerticesData(BABYLON.VertexBuffer.ColorKind, this.finalColors, true, false); 148 | this.renderMesh.updateVerticesData(BABYLON.VertexBuffer.NormalKind, this.normals, true, false); 149 | }; 150 | -------------------------------------------------------------------------------- /wasm/CreaturePackManager.h: -------------------------------------------------------------------------------- 1 | #pragma once 2 | 3 | #include "CreaturePackModule.hpp" 4 | #include 5 | #include 6 | #include 7 | 8 | namespace CreaturePack 9 | { 10 | typedef uint32_t rawPtr_t; 11 | 12 | struct PlayerBounds 13 | { 14 | float x1, y1, x2, y2; 15 | }; 16 | 17 | class PackManager 18 | { 19 | public: 20 | PackManager(); 21 | 22 | virtual ~PackManager(); 23 | 24 | // Adds a new CreaturePack Loader given a typed byte array 25 | bool addPackLoader(const std::string& name_in, rawPtr_t data, int length); 26 | 27 | // Adds a new CreaturePackPlayer and returns a unique handle/id given a loader name 28 | int addPackPlayer(const std::string& loader_name); 29 | 30 | // Removes an existing CreaturePackPlayer given its handle/id 31 | bool removePackPlayer(int handle); 32 | 33 | // Sets an active animation without blending given a player handle/id 34 | bool setPlayerActiveAnimation(int handle, const std::string& name); 35 | 36 | // Blends into an animation given a player handle/id, 0.0 < blend_delta <= 1.0 37 | bool setPlayerBlendToAnimation(int handle, const std::string& name, float blend_delta); 38 | 39 | // Steps the player object with a given time delta given its handle/id 40 | bool stepPlayer(int handle, float delta); 41 | 42 | // Sets the absolute frame/time for the player object's animation 43 | bool setPlayerRunTime(int handle, float time_in); 44 | 45 | // Returns the current run time of a player object given its handle/id 46 | float getPlayerRunTime(int handle) const; 47 | 48 | // Sets whether the player animation is looping given its handle/id 49 | bool setPlayerLoop(int handle, bool should_loop); 50 | 51 | // Applies an offset z to each mesh region 52 | void applyRegionOffsetsZ(int handle, float offset_z); 53 | 54 | // Returns the points of the player given its handle/id 55 | emscripten::val getPlayerPoints(int handle); 56 | 57 | // Returns the points in 3D of the player given its handle/id 58 | emscripten::val getPlayerPoints3D(int handle); 59 | 60 | // Returns the colors of the player given its handle/id 61 | emscripten::val getPlayerColors(int handle); 62 | 63 | // Returns the Uvs of the player given its handle/id 64 | emscripten::val getPlayerUVs(int handle); 65 | 66 | // Returns the Indices of the player given its handle/id 67 | emscripten::val getPlayerIndices(int handle); 68 | 69 | // Returns the bounds of a player given its handle/id 70 | PlayerBounds getPlayerBounds(int handle); 71 | 72 | // Returns the starting frame/time of the currently active animation 73 | int getActiveAnimStartTime(int handle); 74 | 75 | // Returns the ending frame/time of the currently active animation 76 | int getActiveAnimEndTime(int handle); 77 | 78 | // Returns the name of the currently active animation 79 | std::string getActiveAnimName(int handle); 80 | 81 | // Returns a list of available animation clip names 82 | emscripten::val getAllAnimNames(int handle); 83 | 84 | protected: 85 | 86 | CreaturePack::CreaturePackAnimClip * getAnimClip(int handle, const std::string& name_in); 87 | 88 | std::unordered_map> pack_loaders; 89 | std::unordered_map> pack_players; 90 | int pack_id_gen; 91 | }; 92 | } -------------------------------------------------------------------------------- /wasm/CreaturePackWASMPixiJSRenderer.js: -------------------------------------------------------------------------------- 1 | /****************************************************************************** 2 | * Creature Runtimes License 3 | * 4 | * Copyright (c) 2015, Kestrel Moon Studios 5 | * All rights reserved. 6 | * 7 | * Preamble: This Agreement governs the relationship between Licensee and Kestrel Moon Studios(Hereinafter: Licensor). 8 | * This Agreement sets the terms, rights, restrictions and obligations on using [Creature Runtimes] (hereinafter: The Software) created and owned by Licensor, 9 | * as detailed herein: 10 | * License Grant: Licensor hereby grants Licensee a Sublicensable, Non-assignable & non-transferable, Commercial, Royalty free, 11 | * Including the rights to create but not distribute derivative works, Non-exclusive license, all with accordance with the terms set forth and 12 | * other legal restrictions set forth in 3rd party software used while running Software. 13 | * Limited: Licensee may use Software for the purpose of: 14 | * Running Software on Licensee’s Website[s] and Server[s]; 15 | * Allowing 3rd Parties to run Software on Licensee’s Website[s] and Server[s]; 16 | * Publishing Software’s output to Licensee and 3rd Parties; 17 | * Distribute verbatim copies of Software’s output (including compiled binaries); 18 | * Modify Software to suit Licensee’s needs and specifications. 19 | * Binary Restricted: Licensee may sublicense Software as a part of a larger work containing more than Software, 20 | * distributed solely in Object or Binary form under a personal, non-sublicensable, limited license. Such redistribution shall be limited to unlimited codebases. 21 | * Non Assignable & Non-Transferable: Licensee may not assign or transfer his rights and duties under this license. 22 | * Commercial, Royalty Free: Licensee may use Software for any purpose, including paid-services, without any royalties 23 | * Including the Right to Create Derivative Works: Licensee may create derivative works based on Software, 24 | * including amending Software’s source code, modifying it, integrating it into a larger work or removing portions of Software, 25 | * as long as no distribution of the derivative works is made 26 | * 27 | * THE RUNTIMES IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 28 | * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 29 | * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 30 | * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 31 | * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 32 | * OUT OF OR IN CONNECTION WITH THE RUNTIMES OR THE USE OR OTHER DEALINGS IN THE 33 | * RUNTIMES. 34 | *****************************************************************************/ 35 | 36 | // CreaturePackRenderer 37 | function CreaturePackRenderer(manager_in, loader_name_in, texture_in) 38 | { 39 | PIXI.mesh.Mesh.call(this, texture_in); 40 | 41 | this.playerId = manager_in.addPackPlayer(loader_name_in); 42 | this.packManager = manager_in; 43 | this.texture = texture_in; 44 | this.dirty = true; 45 | this.blendMode = PIXI.blendModes.NORMAL; 46 | this.creatureBoundsMin = new PIXI.Point(0,0); 47 | this.creatureBoundsMax = new PIXI.Point(0,0); 48 | 49 | this.vertices = manager_in.getPlayerPoints(this.playerId); 50 | this.uvs = manager_in.getPlayerUVs(this.playerId); 51 | 52 | var readIndices = manager_in.getPlayerIndices(this.playerId); 53 | this.indices = Uint16Array.from(readIndices); 54 | 55 | this.colors = new Float32Array([1,1,1,1]); 56 | 57 | this.drawMode = PIXI.mesh.Mesh.DRAW_MODES.TRIANGLES; 58 | }; 59 | 60 | // constructor 61 | CreaturePackRenderer.prototype = Object.create(PIXI.mesh.Mesh.prototype); 62 | CreaturePackRenderer.prototype.constructor = CreaturePackRenderer; 63 | 64 | CreaturePackRenderer.prototype.UpdateCreatureBounds = function() 65 | { 66 | // update bounds based off world transform matrix 67 | var curBounds = this.packManager.getPlayerBounds(this.playerId); 68 | this.creatureBoundsMin.set(curBounds[0], curBounds[1]); 69 | this.creatureBoundsMax.set(curBounds[2], curBounds[3]); 70 | 71 | this.worldTransform.apply(this.creatureBoundsMin, this.creatureBoundsMin); 72 | this.worldTransform.apply(this.creatureBoundsMax, this.creatureBoundsMax); 73 | }; 74 | 75 | CreaturePackRenderer.prototype.GetPixelScaling = function(desired_x, desired_y) 76 | { 77 | // compute pixel scaling relative to mesh scaling 78 | var curBounds = this.packManager.getPlayerBounds(this.playerId); 79 | 80 | var mesh_size_x = curBounds[2] - curBounds[0]; 81 | var mesh_size_y = curBounds[3] - curBounds[1]; 82 | 83 | var scale_x = 1.0 / mesh_size_x * desired_x; 84 | var scale_y = 1.0 / mesh_size_y * desired_y; 85 | 86 | return [scale_x, scale_y]; 87 | }; 88 | 89 | CreaturePackRenderer.prototype.refresh = function() 90 | { 91 | this.UpdateCreatureBounds(); 92 | this.dirty = true; 93 | }; 94 | 95 | CreaturePackRenderer.prototype.removeFromManager = function() 96 | { 97 | // Call this to remove the player from the manager during destruction to free up memory 98 | this.packManager.removePackPlayer(this.playerId) 99 | } -------------------------------------------------------------------------------- /wasm/CreaturePlayerWidgetTest.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | CreaturePack BabylonJS WebAssembly Widget Demo 5 | 6 | 7 | 8 | 9 | 10 | 11 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 62 | 63 | 64 | 65 | -------------------------------------------------------------------------------- /wasm/CreatureWASMUtils.js: -------------------------------------------------------------------------------- 1 | /****************************************************************************** 2 | * Creature Runtimes License 3 | * 4 | * Copyright (c) 2015, Kestrel Moon Studios 5 | * All rights reserved. 6 | * 7 | * Preamble: This Agreement governs the relationship between Licensee and Kestrel Moon Studios(Hereinafter: Licensor). 8 | * This Agreement sets the terms, rights, restrictions and obligations on using [Creature Runtimes] (hereinafter: The Software) created and owned by Licensor, 9 | * as detailed herein: 10 | * License Grant: Licensor hereby grants Licensee a Sublicensable, Non-assignable & non-transferable, Commercial, Royalty free, 11 | * Including the rights to create but not distribute derivative works, Non-exclusive license, all with accordance with the terms set forth and 12 | * other legal restrictions set forth in 3rd party software used while running Software. 13 | * Limited: Licensee may use Software for the purpose of: 14 | * Running Software on Licensee’s Website[s] and Server[s]; 15 | * Allowing 3rd Parties to run Software on Licensee’s Website[s] and Server[s]; 16 | * Publishing Software’s output to Licensee and 3rd Parties; 17 | * Distribute verbatim copies of Software’s output (including compiled binaries); 18 | * Modify Software to suit Licensee’s needs and specifications. 19 | * Binary Restricted: Licensee may sublicense Software as a part of a larger work containing more than Software, 20 | * distributed solely in Object or Binary form under a personal, non-sublicensable, limited license. Such redistribution shall be limited to unlimited codebases. 21 | * Non Assignable & Non-Transferable: Licensee may not assign or transfer his rights and duties under this license. 22 | * Commercial, Royalty Free: Licensee may use Software for any purpose, including paid-services, without any royalties 23 | * Including the Right to Create Derivative Works: Licensee may create derivative works based on Software, 24 | * including amending Software’s source code, modifying it, integrating it into a larger work or removing portions of Software, 25 | * as long as no distribution of the derivative works is made 26 | * 27 | * THE RUNTIMES IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 28 | * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 29 | * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 30 | * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 31 | * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 32 | * OUT OF OR IN CONNECTION WITH THE RUNTIMES OR THE USE OR OTHER DEALINGS IN THE 33 | * RUNTIMES. 34 | *****************************************************************************/ 35 | // Utils 36 | function CreatureWASMUtils() 37 | { 38 | 39 | }; 40 | 41 | CreatureWASMUtils.heapBytes = function(wasmModule, typedArray) 42 | { 43 | var numBytes = typedArray.length * typedArray.BYTES_PER_ELEMENT; 44 | var ptr = wasmModule._malloc(numBytes); 45 | var heapBytes = new Uint8Array(wasmModule.HEAPU8.buffer, ptr, numBytes); 46 | heapBytes.set(new Uint8Array(typedArray.buffer)); 47 | return heapBytes; 48 | }; -------------------------------------------------------------------------------- /wasm/Makefile: -------------------------------------------------------------------------------- 1 | CC = emcc 2 | MP_CPP_FILES = $(wildcard mp.cpp) 3 | PACK_CPP_FILES = $(wildcard CreaturePackManager.cpp) 4 | INCLUDES = -I$(CURDIR) 5 | EOPT = WASM=1 "BINARYEN_METHOD='native-wasm'" ALLOW_MEMORY_GROWTH=1 TOTAL_MEMORY=524288000 6 | EOPTS = $(addprefix -s $(EMPTY), $(EOPT)) # Add '-s ' to each option 7 | OBJS = mpcppfiles.o packcppfiles.o 8 | CXX_OPTS = -std=c++14 -O2 --bind 9 | LINKER_OPTS = -O2 --bind 10 | 11 | mpcppfiles.o: $(MP_CPP_FILES) 12 | $(CC) $(MP_CPP_FILES) $(EOPTS) $(INCLUDES) $(DEFINES) $(CXX_OPTS) -o mpcppfiles.o 13 | 14 | packcppfiles.o: $(PACK_CPP_FILES) 15 | $(CC) $(PACK_CPP_FILES) $(EOPTS) $(INCLUDES) $(DEFINES) $(CXX_OPTS) -o packcppfiles.o 16 | 17 | all: $(OBJS) 18 | $(CC) $(OBJS) $(EOPTS) $(LINKER_OPTS) -g -o creaturepack-wasm.html 19 | 20 | # Cleans up object files and build directory 21 | clean: 22 | del *.o 23 | del *.wast 24 | del *.wasm 25 | -------------------------------------------------------------------------------- /wasm/PixiJS-WASM-Pack-Demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CreaturePack WebAssembly Demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 74 | 75 | 76 | 77 | -------------------------------------------------------------------------------- /wasm/PixiJS-WASM-Pack-MultiDemo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CreaturePack WebAssembly Demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 41 | 42 | 43 | 44 |
45 | 46 | 47 | 52 | 53 | 54 | 168 | 169 | 170 | 171 | -------------------------------------------------------------------------------- /wasm/README.md: -------------------------------------------------------------------------------- 1 | # CreaturePack Accelerated WebAssembly Module 2 | 3 | This folder contains files used for the **CreaturePack Accelerated WebAssembly** playback of Creature exported characters. [**WebAssembly**](http://webassembly.org/) is a web-based technology stack that allows for native code to be compiled and deployed on a web-based platform. This is especially useful for high quality, high performance animation playback. Read the writeup of the implementation **[here]()**. 4 | 5 | ## Share your animations easily with the CreaturePack WebAssembly Widget 6 | 7 | ![Alt text](https://github.com/kestrelm/Creature_WebGL/blob/master/packPlayer.png) 8 | 9 | The **CreaturePack WebAssembly Widget** allows you to easily share your exported Creature animations on your own personal webpage! The rendering core uses the powerful [**BabylonJS 3D WebGL Engine**](https://www.babylonjs.com/). This allows for beautiful rendering effects, including high quality soft-shadows and real-time 3D lighting. 10 | 11 | Because the animation engine uses the **CreaturePack WebAssembly Runtime**, users will be able to deliver extremely high quality animation while at the same time benefiting from tiny file sizes and lightning fast playback speeds. The widget includes an optional set of player controls with buttons + slider widgets for changing animations, play/pause + fast-forwarding/reversing through your animation clip. 12 | 13 | ### Sharing the CreaturePack WebAssembly Widget Animation on your WebPage 14 | 15 | 1. After you export out your Creature animation ( **Game Engine Export** ), open up your folder and copy over the **CreaturePack** + **Character Image Atlas** files onto your web hosting folder 16 | 17 | Here are the files you need: (Copy them from the Github repository into your web hosting folder): 18 | 19 | - babylon.js 20 | - babylon.gui.min.js 21 | - CreatureWASMUtils.js 22 | - CreaturePackBabylonWASMRenderer.js 23 | - CreaturePlayerWidget.js 24 | - creaturepack-wasm.js 25 | - creaturepack-wasm.wasm 26 | 27 | 28 | 2. At the top of your webpage, make sure you include the following libraries: 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 3. Now define your rendering canvas object in you **style** tag section: 38 | 39 | 54 | 55 | 56 | 57 | 4. In your main webpage's **script** section, create the **CreaturePlayerWidget**: 58 | 59 | 60 | 61 | 62 | 87 | 88 | And that's it! When you open up your webpage in your browser, you should be able to see your character playing back on your browser window. 89 | 90 | ### Configuration Options for Widget 91 | 92 | The **CreaturePlayerWidget** constructor has the following options: 93 | 94 | - **window:** webpage window object 95 | 96 | - **canvas:** the canvas object to start the rendering session 97 | 98 | - **charAssetPath:** path to your CreaturePack Asset 99 | 100 | - **charImgPath:** path to your character texture atlas png 101 | 102 | - **wasmModule:** the CreaturePack WASM Module object 103 | 104 | - **startAnim:** If not empty, will use the specified animation starting out 105 | 106 | - **showPlayer:** Show the player controls widget object 107 | 108 | - **camPosZ:** Camera Z position 109 | 110 | - **groundPlaneOn:** Shows ground plane or not 111 | 112 | - **groundPlaneZ:** Ground plane Z position 113 | 114 | - **shadowsOn:** Does character cast shadows 115 | 116 | - **bgColor:** Background color 117 | 118 | - **readyCB** An optional callback function that is triggered when this widget is finished loading 119 | 120 | - **playOnStart** Whether the animation plays when the widget is loaded 121 | 122 | 123 | -------------------------------------------------------------------------------- /wasm/creaturepack-wasm.wasm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kestrelm/Creature_WebGL/3d7f3563d183eef165aefeb6a3fbd9669b9f78af/wasm/creaturepack-wasm.wasm -------------------------------------------------------------------------------- /wasm/mp.h: -------------------------------------------------------------------------------- 1 | #pragma once 2 | 3 | #include 4 | #include 5 | #include 6 | #include 7 | #include 8 | #include 9 | #include 10 | 11 | // BareBones MessagePack Reader, only handles ints, floats, arrays and strings 12 | 13 | namespace mpMini { 14 | enum { 15 | MSG_MINI_GENERIC_INT_TYPE, 16 | MSG_MINI_GENERIC_FLOAT_TYPE, 17 | MSG_MINI_GENERIC_STRING_TYPE, 18 | MSG_MINI_GENERIC_ARRAY_INT_TYPE, 19 | MSG_MINI_GENERIC_ARRAY_FLOAT_TYPE, 20 | MSG_MINI_GENERIC_ARRAY_STRING_TYPE, 21 | MSG_MINI_GENERIC_ARRAY_BYTE_TYPE 22 | }; 23 | 24 | class msg_mini_generic_data { 25 | public: 26 | msg_mini_generic_data(int32_t type_in) 27 | { 28 | type = type_in; 29 | int_val = 0; 30 | float_val = 0; 31 | } 32 | 33 | int32_t type; 34 | int32_t int_val; 35 | float float_val; 36 | std::string string_val; 37 | std::vector int_array_val; 38 | std::vector float_array_val; 39 | std::vector byte_array_val; 40 | std::vector str_array_val; 41 | }; 42 | 43 | union msg_mini_object_data { 44 | bool boolean; 45 | uint8_t u8; 46 | uint16_t u16; 47 | uint32_t u32; 48 | uint64_t u64; 49 | int8_t s8; 50 | int16_t s16; 51 | int32_t s32; 52 | int64_t s64; 53 | float flt; 54 | double dbl; 55 | uint32_t array_size; 56 | uint32_t map_size; 57 | uint32_t str_size; 58 | }; 59 | 60 | class msg_mini_object { 61 | public: 62 | uint8_t type; 63 | union msg_mini_object_data as; 64 | }; 65 | 66 | class msg_mini { 67 | protected: 68 | uint8_t error; 69 | std::vector buf; 70 | uint32_t read_idx, store_read_idx; 71 | std::vector generic_data; 72 | 73 | bool read_one_byte(uint8_t *x); 74 | 75 | bool read_marker_type(uint8_t *marker); 76 | 77 | void store_read_pos() 78 | { 79 | store_read_idx = read_idx; 80 | } 81 | 82 | void restore_read_pos() 83 | { 84 | read_idx = store_read_idx; 85 | } 86 | 87 | public: 88 | msg_mini(const std::vector& buf_in) 89 | { 90 | error = 0; 91 | buf = buf_in; 92 | read_idx = 0; 93 | store_read_idx = 0; 94 | msg_mini_build_generic_objects(); 95 | } 96 | 97 | virtual ~msg_mini() {} 98 | 99 | bool read(void *data, size_t limit) 100 | { 101 | if (is_at_end()) 102 | { 103 | // end of buffer 104 | return false; 105 | } 106 | 107 | uint8_t * base_ptr = &buf[read_idx]; 108 | //memcpy_s(data, limit, base_ptr, limit); 109 | std::memcpy(data, base_ptr, limit); 110 | read_idx += (uint32_t)limit; 111 | 112 | return true; 113 | } 114 | 115 | bool readBytesChunk(size_t limit, std::function readCB) 116 | { 117 | if (is_at_end()) 118 | { 119 | // end of buffer 120 | return false; 121 | } 122 | 123 | uint8_t * base_ptr = &buf[read_idx]; 124 | for (size_t i = 0; i < limit; i++) 125 | { 126 | readCB(i, base_ptr[i]); 127 | read_idx++; 128 | } 129 | 130 | return true; 131 | } 132 | 133 | bool is_at_end() const { 134 | return read_idx >= buf.size(); 135 | } 136 | 137 | void reset_read() 138 | { 139 | read_idx = 0; 140 | } 141 | 142 | /* 143 | * Actual Calls 144 | */ 145 | 146 | const char* get_strerror() const; 147 | 148 | bool 149 | msg_mini_build_generic_objects(); 150 | 151 | const std::vector& 152 | msg_mini_get_generic_objects() const; 153 | 154 | bool msg_mini_read_int(int32_t *i); 155 | 156 | bool msg_mini_read_real(float *d); 157 | 158 | bool msg_mini_read_nil(); 159 | 160 | bool msg_mini_read_bool(bool *b); 161 | 162 | bool msg_mini_read_str_size(uint32_t *size); 163 | 164 | bool msg_mini_read_str(std::string& data); 165 | 166 | bool msg_mini_read_bin(uint32_t *size); 167 | 168 | bool msg_mini_read_array(uint32_t *size); 169 | 170 | bool msg_mini_read_object(msg_mini_object *obj); 171 | 172 | /* Data calls 173 | */ 174 | 175 | bool msg_mini_read_pfix(uint8_t *c); 176 | bool msg_mini_read_nfix(int8_t *c); 177 | 178 | bool msg_mini_read_sfix(int8_t *c); 179 | bool msg_mini_read_s8(int8_t *c); 180 | bool msg_mini_read_s16(int16_t *s); 181 | bool msg_mini_read_s32(int32_t *i); 182 | bool msg_mini_read_s64(int64_t *l); 183 | 184 | bool msg_mini_read_ufix(uint8_t *c); 185 | bool msg_mini_read_u8(uint8_t *c); 186 | bool msg_mini_read_u16(uint16_t *s); 187 | bool msg_mini_read_u32(uint32_t *i); 188 | bool msg_mini_read_u64(uint64_t *l); 189 | 190 | bool msg_mini_read_float(float *f); 191 | bool msg_mini_read_double(double *d); 192 | 193 | /* Object calls 194 | */ 195 | 196 | bool msg_mini_object_is_char(msg_mini_object *obj); 197 | bool msg_mini_object_is_short(msg_mini_object *obj); 198 | bool msg_mini_object_is_int(msg_mini_object *obj); 199 | bool msg_mini_object_is_long(msg_mini_object *obj); 200 | bool msg_mini_object_is_sinteger(msg_mini_object *obj); 201 | bool msg_mini_object_is_uchar(msg_mini_object *obj); 202 | bool msg_mini_object_is_ushort(msg_mini_object *obj); 203 | bool msg_mini_object_is_uint(msg_mini_object *obj); 204 | bool msg_mini_object_is_ulong(msg_mini_object *obj); 205 | bool msg_mini_object_is_uinteger(msg_mini_object *obj); 206 | bool msg_mini_object_is_float(msg_mini_object *obj); 207 | bool msg_mini_object_is_double(msg_mini_object *obj); 208 | bool msg_mini_object_is_nil(msg_mini_object *obj); 209 | bool msg_mini_object_is_bool(msg_mini_object *obj); 210 | bool msg_mini_object_is_str(msg_mini_object *obj); 211 | bool msg_mini_object_is_bin(msg_mini_object *obj); 212 | bool msg_mini_object_is_array(msg_mini_object *obj); 213 | bool msg_mini_object_is_map(msg_mini_object *obj); 214 | 215 | bool msg_mini_object_as_char(msg_mini_object *obj, int8_t *c); 216 | bool msg_mini_object_as_short(msg_mini_object *obj, int16_t *s); 217 | bool msg_mini_object_as_int(msg_mini_object *obj, int32_t *i); 218 | bool msg_mini_object_as_long(msg_mini_object *obj, int64_t *d); 219 | bool msg_mini_object_as_sinteger(msg_mini_object *obj, int64_t *d); 220 | bool msg_mini_object_as_float(msg_mini_object *obj, float *f); 221 | bool msg_mini_object_as_double(msg_mini_object *obj, double *d); 222 | bool msg_mini_object_as_bool(msg_mini_object *obj, bool *b); 223 | bool msg_mini_object_as_str(msg_mini_object *obj, uint32_t *size); 224 | bool msg_mini_object_as_array(msg_mini_object *obj, uint32_t *size); 225 | bool msg_mini_object_as_map(msg_mini_object *obj, uint32_t *size); 226 | 227 | bool msg_mini_object_to_str(msg_mini_object *obj, char *data, uint32_t buf_size); 228 | 229 | }; 230 | 231 | 232 | 233 | } -------------------------------------------------------------------------------- /webServerTest.py: -------------------------------------------------------------------------------- 1 | import http.server 2 | import socketserver 3 | 4 | PORT = 8887 5 | 6 | class Handler(http.server.SimpleHTTPRequestHandler): 7 | pass 8 | 9 | Handler.extensions_map= { 10 | '.manifest': 'text/cache-manifest', 11 | '.html': 'text/html', 12 | '.png': 'image/png', 13 | '.jpg': 'image/jpg', 14 | '.svg': 'image/svg+xml', 15 | '.css': 'text/css', 16 | '.js': 'application/x-javascript', 17 | '.wasm': 'application/wasm', 18 | '': 'application/octet-stream', # Default 19 | } 20 | 21 | httpd = socketserver.TCPServer(("127.0.0.1", PORT), Handler) 22 | print ("Serving at port: %d" %PORT) 23 | httpd.serve_forever() --------------------------------------------------------------------------------