-
Notifications
You must be signed in to change notification settings - Fork 33
/
PixiJs-SkinSwap-Demo.html
158 lines (122 loc) · 4.12 KB
/
PixiJs-SkinSwap-Demo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>PixiJs - Basic scene</title>
<style>
canvas {
border: 1px dashed gray;
}
html, body {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script src="pixi.js"></script>
<script src="gl-matrix.js"></script>
<script src="flatbuffers.js"></script>
<script src="CreatureFlatData_generated.js"></script>
<script src="CreatureMeshBone.js"></script>
<script src="CreaturePixiJSRefRenderer.js"></script>
<script>
var loadFile = function (filePath, done) {
var xhr = new XMLHttpRequest();
xhr.onload = function () { return done(this.responseText); };
xhr.open("GET", filePath, true);
xhr.send();
};
var char_json = null;
var meta_json = null;
loadFile('skinSwap_character_data.json', function(responseText) {
char_json = JSON.parse(responseText);
loadFile('skinSwap_character_data_meta.mdata', function(responseText) {
meta_json = JSON.parse(responseText);
runApp();
});
});
function runApp() {
var new_creature = new Creature(char_json, false);
var new_animation_1 = new CreatureAnimation(char_json, "cape", false);
var new_manager = new CreatureManager(new_creature);
new_manager.AddAnimation(new_animation_1);
new_manager.SetActiveAnimationName("cape", false);
new_manager.SetShouldLoop(true);
new_manager.SetIsPlaying(true);
new_manager.RunAtTime(0);
var meta_data = CreatureModuleUtils.BuildCreatureMetaData(meta_json);
new_creature.SetMetaData(meta_data);
// Events Callbacks setup ( Shows you how to setup event callbacks. You can either load it in from
// MetaData OR add it manually yourself after the character is loaded )
var game_controller = new CreatureGameController(meta_data);
game_controller.BuildFrameCallbacks( function(animClipName, name)
{
// You are given an input animation clip name and the event name
// Your job here is to return another function that will be triggered
// when the event fires. Here we just return null but return a valid function
// for your own purposes
return null;
});
// You can also add in your event trigger manually/procedurally from code like this
game_controller.AddFrameCallback("cape", "fireEvent1", 30,
function(eventName, run_time)
{
console.log("Event callback triggered: " + eventName + " at frame: " + run_time);
}
);
// create an new instance of a pixi stage
var stage = new PIXI.Container();
// create a renderer instance.
var renderer = new PIXI.Renderer(window.innerWidth, window.innerHeight);
// add the renderer view element to the DOM
document.body.appendChild(renderer.view);
// create a texture from an image path
var texture = PIXI.Texture.fromImage("skinSwap_character_img.png");
var creatureContainer = new PIXI.Container();
creatureContainer.position.x = window.innerWidth / 4;
creatureContainer.position.y = window.innerHeight / 2;
creatureContainer.scale.set(45.0);
stage.addChild(creatureContainer);
var new_creature_renderer = new CreatureRenderer(new_manager, texture);
new_creature_renderer.EnableSkinSwap("cape", true);
creatureContainer.addChild(new_creature_renderer);
var swap_cnter = 0;
var swap_type = 0;
function animate() {
requestAnimationFrame(animate);
// Step the animation
new_manager.Update(0.05);
// Fire any events
game_controller.ProcessCallbacks(new_manager);
new_creature_renderer.refresh();
// render the stage
renderer.render(stage);
swap_cnter += 1;
if(swap_cnter % 100 == 0)
{
swap_type += 1;
if(swap_type % 3 == 0)
{
new_creature_renderer.EnableSkinSwap("dressSword", true);
}
else if(swap_type % 3 == 1)
{
new_creature_renderer.EnableSkinSwap("defaultGun", true);
}
else if(swap_type % 3 == 2)
{
new_creature_renderer.EnableSkinSwap("cape", true);
}
}
}
animate();
};
</script>
</body>
</html>