├── .gitignore ├── AdHelper └── README.md ├── EaselJS_Box2dWeb ├── README.md ├── README_1.jpg ├── assets │ ├── balls.fla │ ├── balls.html │ ├── balls.js │ └── explosion.mp3 ├── index.html └── libs │ └── Box2dWeb-2.1.a.3.min.js ├── GettingStartedWithCreateJS ├── GettingStartedWithCreateJS.png ├── README.md ├── assets │ ├── daisy.png │ └── pop.mp3 └── index.html ├── Kaleidoscope ├── Kaleidoscope.js ├── README.md ├── README_1.jpg ├── demo.html └── imgs │ └── pic.jpg ├── LineGraph ├── README.md ├── README_1.jpg └── demo.html ├── PlanetaryGary ├── Flash │ ├── PlanetaryGary_art.fla │ ├── PlanetaryGary_art_OLD.fla │ └── README.md ├── README.md ├── README_1.jpg ├── assets │ ├── PlanetaryGary_art.js │ ├── images │ │ ├── bg-stars.png │ │ ├── frame.png │ │ ├── planet-one.png │ │ └── planet-two.png │ ├── sounds │ │ ├── BodySlam.mp3 │ │ ├── BodySlam.ogg │ │ ├── DirtSlide.mp3 │ │ ├── DirtSlide.ogg │ │ ├── EnemyHit.mp3 │ │ ├── EnemyHit.ogg │ │ ├── HitHard4.mp3 │ │ ├── HitHard4.ogg │ │ ├── LaserGunShot.mp3 │ │ ├── LaserGunShot.ogg │ │ ├── PressPlay.mp3 │ │ ├── PressPlay.ogg │ │ ├── TunnelCollision.mp3 │ │ ├── TunnelCollision.ogg │ │ ├── garywalk_chill.mp3 │ │ ├── garywalk_chill.ogg │ │ ├── jump4.mp3 │ │ └── jump4.ogg │ └── styles.css ├── index.html ├── js │ ├── Game.js │ └── GameInit.js ├── libs │ └── webgl-NEXT.combined.js └── sounds.json ├── README.md └── eLearning_Lever ├── README.md ├── README_1.jpg ├── alternateImage.png ├── demo.html └── interactive.js /.gitignore: -------------------------------------------------------------------------------- 1 | #----------------------------- 2 | # SYSTEM 3 | #----------------------------- 4 | .DS_Store 5 | 6 | #----------------------------- 7 | # INVALID FILES 8 | # (for cross OS compatibility) 9 | #----------------------------- 10 | *[\<\>\:\"\/\\\|\?\*]* 11 | 12 | #----------------------------- 13 | # WORKSPACE 14 | #----------------------------- 15 | .idea/ 16 | *.sublime-project 17 | *.sublime-workspace 18 | 19 | 20 | #----------------------------- 21 | # SETUP 22 | #----------------------------- 23 | node_modules/ 24 | 25 | 26 | #----------------------------- 27 | # BUILD/DEBUGGING 28 | #----------------------------- 29 | .sass-cache/ 30 | deploy/ 31 | *TMP* 32 | 33 | #----------------------------- 34 | # AUTO-GENERATED 35 | #----------------------------- 36 | /src/index.html 37 | /src/styles/css/project.css 38 | *.compiled.js 39 | /src/scripts/*.min.js 40 | config.codekit 41 | -------------------------------------------------------------------------------- /AdHelper/README.md: -------------------------------------------------------------------------------- 1 | Moved to [http://github.com/createjs/html5ads/](http://github.com/createjs/html5ads/). -------------------------------------------------------------------------------- /EaselJS_Box2dWeb/README.md: -------------------------------------------------------------------------------- 1 | EaselJS & Box2dWeb 2 | ======= 3 | 4 | Simple demo showing how to integrate the Box2dWeb physics engine with EaselJS graphics & SoundJS audio. 5 | 6 | ![ScreenShot](https://raw.github.com/CreateJS/sandbox/master/EaselJS_Box2dWeb/README_1.jpg) 7 | 8 | **[View this example online.](http://sandbox.createjs.com/EaselJS_Box2dWeb/)** 9 | 10 | Click a creature to make them explode. Append a "debug" param to the query string to see the Box2d debug draw. Like so: 11 | index.html?debug 12 | 13 | It also demonstrates using SpriteSheetBuilder to generate run-time spritesheets from vector art produced in Flash Pro. 14 | 15 | This approach allows for tiny file sizes - the vector graphics are only 9kb when sent over the wire (gzipped) - and optimal performance on both desktop and mobile. It also allows the art to be scaled dynamically at run time. Append a "scale" param to the query string to see this in action. For example: 16 | index.html?scale=0.25 17 | 18 | The "balls.html" and "balls.js" files are generated by Adobe's AnimateCC from the "balls.fla" file. 19 | 20 | The source code in "index.html" is licensed under the MIT license. All art & graphics is copyright 2013 gskinner.com, inc. and cannot be used without permission. -------------------------------------------------------------------------------- /EaselJS_Box2dWeb/README_1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CreateJS/sandbox/bfcfb5afaaed512c983159285a582dd8c0bbb6ab/EaselJS_Box2dWeb/README_1.jpg -------------------------------------------------------------------------------- /EaselJS_Box2dWeb/assets/balls.fla: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CreateJS/sandbox/bfcfb5afaaed512c983159285a582dd8c0bbb6ab/EaselJS_Box2dWeb/assets/balls.fla -------------------------------------------------------------------------------- /EaselJS_Box2dWeb/assets/balls.html: -------------------------------------------------------------------------------- 1 | 2 | 10 | 11 | 12 | 13 | 14 | balls 15 | 16 | 17 | 18 | 81 | 82 | 83 | 84 |
85 | 86 |
87 |
88 |
89 | 90 | -------------------------------------------------------------------------------- /EaselJS_Box2dWeb/assets/balls.js: -------------------------------------------------------------------------------- 1 | (function (cjs, an) { 2 | 3 | var p; // shortcut to reference prototypes 4 | var lib={};var ss={};var img={}; 5 | lib.ssMetadata = []; 6 | 7 | 8 | // symbols: 9 | // helper functions: 10 | 11 | function mc_symbol_clone() { 12 | var clone = this._cloneProps(new this.constructor(this.mode, this.startPosition, this.loop)); 13 | clone.gotoAndStop(this.currentFrame); 14 | clone.paused = this.paused; 15 | clone.framerate = this.framerate; 16 | return clone; 17 | } 18 | 19 | function getMCSymbolPrototype(symbol, nominalBounds, frameBounds) { 20 | var prototype = cjs.extend(symbol, cjs.MovieClip); 21 | prototype.clone = mc_symbol_clone; 22 | prototype.nominalBounds = nominalBounds; 23 | prototype.frameBounds = frameBounds; 24 | return prototype; 25 | } 26 | 27 | 28 | (lib.Circle = function(mode,startPosition,loop) { 29 | this.initialize(mode,startPosition,loop,{}); 30 | 31 | // Layer 1 32 | this.shape = new cjs.Shape(); 33 | this.shape.graphics.f().s("#CCFFFF").ss(10.1,1,1).de(-61,-61,122,122); 34 | this.shape.setTransform(0,0,0.82,0.82); 35 | 36 | this.timeline.addTween(cjs.Tween.get(this.shape).wait(1)); 37 | 38 | }).prototype = getMCSymbolPrototype(lib.Circle, new cjs.Rectangle(-55,-55,110.1,110.1), null); 39 | 40 | 41 | (lib.PinkChunk3 = function(mode,startPosition,loop) { 42 | this.initialize(mode,startPosition,loop,{}); 43 | 44 | // Layer 1 45 | this.shape = new cjs.Shape(); 46 | this.shape.graphics.f("#752C44").s().p("AhODTQgcgbgVgfQgXgjgLgpQgKgqAFgoQAFguAVgsQAVgrAiggQASgSAlgTQAogWAMgKQAPgNBBB+QA8B0AFAcIAAACQAKBFhCBBQgwAwhNAkQgFADgGAAQgUAAghgegAgNDTQgBgCAagRIADgBQBmhOAIhjQgfgngehIQgbhAgOg6QgJAIguAhQgiAXgSAZQgxBEgBBOQAABGAqA3QAIAKAiAYQAfAWAGAOIAAAAg"); 47 | this.shape.setTransform(0,0,0.8,0.8); 48 | 49 | this.shape_1 = new cjs.Shape(); 50 | this.shape_1.graphics.f("#E54875").s().p("AhEC/Qg4hEgShEQgShJAnhDQAcgxBGg9QBBg6AjBGQAKAVAOAvQAOAwAIAPQBLCciPBcQgoAZgYACIgDAAQgeAAgaggg"); 51 | this.shape_1.setTransform(-0.9,0.5,0.8,0.8); 52 | 53 | this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.shape_1},{t:this.shape}]}).wait(1)); 54 | 55 | }).prototype = getMCSymbolPrototype(lib.PinkChunk3, new cjs.Rectangle(-13.5,-19.3,27.1,38.6), null); 56 | 57 | 58 | (lib.PinkChunk1 = function(mode,startPosition,loop) { 59 | this.initialize(mode,startPosition,loop,{}); 60 | 61 | // Layer 1 62 | this.shape = new cjs.Shape(); 63 | this.shape.graphics.f("#752C44").s().p("AguCVQgYgHgegOQgpgUgBgLQgHg+Aag/QAag/AwgoQA5gwA0AYQAbAMAVATQAcAagEAXQAXAugUBSQgVBVgvAUQgPAGgVAAQgfAAgugPgAgyhRQgdArgQAjQgVAtAAAyQAPADAiANQAeALASADQA9AMAfgeQAbgaAKhBIABgDQAHgxgbgtQgegygzgDIgBAAQgVAAgmA4g"); 64 | this.shape.setTransform(0,-0.1,1.1,1.1); 65 | 66 | this.shape_1 = new cjs.Shape(); 67 | this.shape_1.graphics.f("#E54875").s().p("AgHCXQg5gBglglQgmglAQg/QANg4AugxQAvgyAtgHQA0gJAYA3IAAABQAZA5AAA3QAABEgoAmQgmAjg2AAIgEAAg"); 68 | this.shape_1.setTransform(0.1,-0.5,1.1,1.1); 69 | 70 | this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.shape_1},{t:this.shape}]}).wait(1)); 71 | 72 | }).prototype = getMCSymbolPrototype(lib.PinkChunk1, new cjs.Rectangle(-15.9,-18.1,31.8,36.1), null); 73 | 74 | 75 | (lib.MooseToothShine = function(mode,startPosition,loop) { 76 | this.initialize(mode,startPosition,loop,{}); 77 | 78 | // Layer 1 79 | this.shape = new cjs.Shape(); 80 | this.shape.graphics.f("#FFFFFF").s().p("AgbAAQAAgcAbAAQAcAAAAAcQAAAdgcAAQgbAAAAgdg"); 81 | this.shape.setTransform(7.2,-3.6); 82 | 83 | this.shape_1 = new cjs.Shape(); 84 | this.shape_1.graphics.f("#FFFFFF").s().p("AgMAOQglgSgPgPQgLgMAUgCQAWgCAhANQApAQAcAVQABASgLABIgIABQgZAAgmgVg"); 85 | this.shape_1.setTransform(-4,-4.3,0.866,1,0,0,0,0,-0.9); 86 | 87 | this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.shape_1},{t:this.shape}]}).wait(1)); 88 | 89 | }).prototype = p = new cjs.MovieClip(); 90 | p.nominalBounds = new cjs.Rectangle(-10,-6.9,20.1,6.9); 91 | 92 | 93 | (lib.MooseEye = function(mode,startPosition,loop) { 94 | this.initialize(mode,startPosition,loop,{}); 95 | 96 | // Layer 1 97 | this.shape = new cjs.Shape(); 98 | this.shape.graphics.f("#49473C").s().p("AmqFnQhegMg0hOQgwhHAAhiQgBhVAchRQAghcA4gxQApgjBIAHQBHAIAYArQAphgBTgqQBvg5BuAeQByAgA2BtQAihDBJgKQBLgLBKA2IgIgHIAbAVIgKgHQB6BnAQCJQASCdiOBbQg+AphIgCQhagDgzhPQhICDibAKQhDAEg+gWQg+gXglgsQAAAdglAcQgvAlhWAAIgVgBgAnfimQguAsgZBJQgXA/gBBIQgCBGAWA2QAbBCA5AWQCYA5BCh3QgYgfgQgnQgchBgGhOQgHhQAShJQgZg+g8gCIgEAAQgvAAgcAcgAg1k/QiKAHhDB9QghBHgDBTQgCBQAaBNQAYBIA7AxQA4AvBHAMQBGAMBAgcQBCgdAphDQgtBOAxhTIADgFQAlhEAChXQABhRgehRQgfhYgxgvQgXgWgugOQgqgNgsAAIgQAAgAFDj6Qg9AIggA/QAcAzAHBlQAJBugcBJQAgBHA9AOQA2ANA9giQA7ghAjg7QAmg/gIg/QgJhEgyhDQgug7hBgoQgegTgkAAIgTABg"); 99 | this.shape.setTransform(0.8,-36); 100 | 101 | this.shape_1 = new cjs.Shape(); 102 | this.shape_1.graphics.f("#382F22").s().p("Ai7AkQgOgMBkgfQBegeAWgCQAogBBCATQBCATADAMQADALhUgJIhngKIhgAZQg2ANgZAAQgOAAgEgEg"); 103 | this.shape_1.setTransform(-48.6,-65.4,0.802,0.875,0,-4,176); 104 | 105 | this.shape_2 = new cjs.Shape(); 106 | this.shape_2.graphics.f("#382F22").s().p("Ai7AkQgOgMBkgfQBegeAWgCQAogBBCATQBCATADAMQADALhUgJIhngKIhgAZQg2ANgZAAQgOAAgEgEg"); 107 | this.shape_2.setTransform(44.8,-71.4); 108 | 109 | this.shape_3 = new cjs.Shape(); 110 | this.shape_3.graphics.f("#000000").s().p("AgjAtQgOgTAAgaQAAgaAOgSQAQgTATAAQAVAAAOATQAPASAAAaQAAAagPATQgOATgVAAQgTAAgQgTg"); 111 | this.shape_3.setTransform(-39.7,-14,0.741,1.012,-15.7); 112 | 113 | this.shape_4 = new cjs.Shape(); 114 | this.shape_4.graphics.f("#FFFFFF").s().p("AgeAAQgBghAfAAQAgAAAAAhQAAAjggAAQgfAAABgjg"); 115 | this.shape_4.setTransform(51.9,-41.5); 116 | 117 | this.shape_5 = new cjs.Shape(); 118 | this.shape_5.graphics.f("#FFFFFF").s().p("AgwAOQgQgWALgSQAJgRAYgFQAXgGAVAKQAYALAHAbQAOA2gvADIgFAAQgpAAgYglg"); 119 | this.shape_5.setTransform(41.4,-49.6); 120 | 121 | this.shape_6 = new cjs.Shape(); 122 | this.shape_6.graphics.f("#382F22").s().p("AkFByQgwgOBOheQBFhTAigPQA+ggBkASQBRAPAoAbQA2AkAYAWQAxAugCAqQgBASg/g2QhCg8gIgGQg7glg9gMQhDgNg8AXQgXAJhCBUQg+BQgFAAIAAAAg"); 123 | this.shape_6.setTransform(-5.3,-87.7); 124 | 125 | this.shape_7 = new cjs.Shape(); 126 | this.shape_7.graphics.f("#000000").s().p("AgjAtQgOgTAAgaQAAgaAOgSQAQgTATAAQAVAAAOATQAPASAAAaQAAAagPATQgOATgVAAQgTAAgQgTg"); 127 | this.shape_7.setTransform(-8.2,-20.9,1,1.098,-3.7); 128 | 129 | this.shape_8 = new cjs.Shape(); 130 | this.shape_8.graphics.f("#FFFFFF").s().p("AgqAqQgOgRAAgZQAAgYAOgSQAQgTAaAAQAbAAAQATQAOASAAAYQAAAZgOARQgQAUgbAAQgaAAgQgUg"); 131 | this.shape_8.setTransform(-40.2,-47.9); 132 | 133 | this.shape_9 = new cjs.Shape(); 134 | this.shape_9.graphics.f("#FFFFFF").s().p("AguA9QgkgRgFgbQgEgXAUgXQATgXAfgLQAggMAcAIIADAAIACABQAhALAJAcQAIAagRAcQgSAdggALQgOAFgOAAQgWAAgXgLg"); 135 | this.shape_9.setTransform(1.8,-54.3); 136 | 137 | this.shape_10 = new cjs.Shape(); 138 | this.shape_10.graphics.f("#000000").s().p("AgjAtQgOgTAAgaQAAgaAOgSQAQgTATAAQAVAAAOATQAPASAAAaQAAAagPATQgOATgVAAQgTAAgQgTg"); 139 | this.shape_10.setTransform(47.7,-37.6,0.83,1.059,-10.2); 140 | 141 | this.shape_11 = new cjs.Shape(); 142 | this.shape_11.graphics.f("#EADFC3").s().p("AnFFIQhEgXgnhCQgqhKANhmQATkCCFgVQAugHAyAXQAqATAQAWQAUhdBOgvQBDgpBdAFQBWAEBDAoQBGAqAIA8IAAAAQBJhXBSAAQCKAABcEUQAJA9gfBAQgfA/g3AkQg8AnhBgIQhJgJhAhGQgdA9hBApQg+AmhIAIQhMAJg8gdQhDgfgehEQgYBSg/AhQgiARglAAQgbAAgcgJgAB5hjQgLAMAAAQQAAAQALALQALAMAPAAQAPAAAKgMQALgLAAgQQAAgQgLgMQgKgLgPAAQgPAAgLALg"); 143 | this.shape_11.setTransform(0.8,-35.8); 144 | 145 | this.shape_12 = new cjs.Shape(); 146 | this.shape_12.graphics.f("#FFFFFF").s().p("AgZAbQgLgLAAgQQAAgPALgMQALgLAOAAQAPAAAKALQAMAMgBAPQABAQgMALQgKAMgPAAQgOAAgLgMg"); 147 | this.shape_12.setTransform(15.5,-43); 148 | 149 | this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.shape_12},{t:this.shape_11},{t:this.shape_10},{t:this.shape_9},{t:this.shape_8},{t:this.shape_7},{t:this.shape_6},{t:this.shape_5},{t:this.shape_4},{t:this.shape_3},{t:this.shape_2},{t:this.shape_1},{t:this.shape}]}).wait(1)); 150 | 151 | }).prototype = p = new cjs.MovieClip(); 152 | p.nominalBounds = new cjs.Rectangle(-63.8,-99,127.6,99.1); 153 | 154 | 155 | (lib.MooseChunk1 = function(mode,startPosition,loop) { 156 | this.initialize(mode,startPosition,loop,{}); 157 | 158 | // Layer 1 159 | this.shape = new cjs.Shape(); 160 | this.shape.graphics.f("#494729").s().p("AiZCSIAAABQgBAAAAABQgBAAAAAAQgBABgBAAQAAgBgBAAQgBAAAAAAQgBAAAAgBQgBAAAAgBQAAgBAAAAQgEg8ALgzQAOg8AiglQAfgiAzggIBbg0QAMgGAKAIQAJAIgCALQAeAUAQBJQAIAjAFAyIAIBXQABAKgJAEQgIADgIgFQgtAwhxAQQgdAEgWAAQhIAAgLgngAgHhhQgvAdgZAfQgXAcgNAzQgRBBgIASIABABQAQAZAwgCQAXgBAxgLQA0gMAbgOQAJgEAQgMQAQgMAIgEIADgBIgFg+QgDgkgFgaQgFgcgFgNQgHgXgKgQIgMgQIhTAtg"); 161 | 162 | this.shape_1 = new cjs.Shape(); 163 | this.shape_1.graphics.f("#EFD659").s().p("AhJClQgRABgWgCQgPgBgKgKQgMgKABgOQAIg2AKghQANguAZggQAqg4Bag/IADgBIAMgMQAKgKANAEQAMAEAGANQAeBLALAtQAUBMgNAwQgLAmgpAYQghASgvAHQgQACgOAAQgfAAgYgLg"); 164 | this.shape_1.setTransform(0,-0.4); 165 | 166 | this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.shape_1},{t:this.shape}]}).wait(1)); 167 | 168 | }).prototype = getMCSymbolPrototype(lib.MooseChunk1, new cjs.Rectangle(-16.3,-18.5,32.7,37), null); 169 | 170 | 171 | (lib.MooseAntler = function(mode,startPosition,loop) { 172 | this.initialize(mode,startPosition,loop,{}); 173 | 174 | // Layer 1 175 | this.shape = new cjs.Shape(); 176 | this.shape.graphics.f("#382F22").s().p("Aj/E5QgEgDgEghQAvgHBxADQB1ACA2gGQDCgXALirQAGhagHg+QgKhXglg3Qgpg8guANQgtAOgJBHQgGAwALByQADBlgxAuQg1A0gjg0QgagpgBg/QAAgWgOgkQgPgngUgcQg2hKgpBLQgNAXAGArQAEAYAMAyQAIAqgHAVQgKAbgnACQgnAagOgZQgGgJAEgJQAEgKAMAAQAIgFAiABQAUABgGgfIgMg3QgHgggCgXQgFhCAtgpQAwgrA6ArQAtAiAQA4QAIAdAFBNQAEA9AkgGQAlgHAMg3QAIgngGhDQgIhQACgcQAFhFAjgqQArgzBAAgQBoA1ANDNQAJCFgZBMQglBthuAZQgxAKhFABIh2gCQhMAAgwAEIgdABQgLAAgCgBg"); 177 | this.shape.setTransform(0,-31.4); 178 | 179 | this.shape_1 = new cjs.Shape(); 180 | this.shape_1.graphics.f("#6B604A").s().p("AAABLIiVgKQhVgDgKgCQhDgMA4glQAagRAygCIBQACIBhADQA3ABApgGQAigFAugXQA6gdATgHQAngNgKAuQgJAogTASQgkAhhEAOQgyAKhCAAIgggBg"); 181 | this.shape_1.setTransform(0.6,-10); 182 | 183 | this.shape_2 = new cjs.Shape(); 184 | this.shape_2.graphics.f("#7F7152").s().p("AkXEoQgkgrAAhJQABglAHgbQBGAAAegNQATgHgLg1QgGgegRg9QgHgpAUgeQAUgeAlgEQAigEAhA1QAdAuAHAtQALBJAEANQAQAxAmgBQAlgCAUhAQAKggADgfQgckFBagYQAwgNAyBDQA6BNAHB+QAHB6gdBFQgTAsg2AyQgkAhjrAKQhdAEhYAAIgvAAg"); 185 | this.shape_2.setTransform(-1.8,-31.4); 186 | 187 | this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.shape_2},{t:this.shape_1},{t:this.shape}]}).wait(1)); 188 | 189 | }).prototype = getMCSymbolPrototype(lib.MooseAntler, new cjs.Rectangle(-33.3,-62.8,64.7,62.9), null); 190 | 191 | 192 | (lib.GreenChunk2 = function(mode,startPosition,loop) { 193 | this.initialize(mode,startPosition,loop,{}); 194 | 195 | // Layer 1 196 | this.shape = new cjs.Shape(); 197 | this.shape.graphics.f("#494729").s().p("AgfEZQgjgLgogrQgsgwgWgfQgng3gCgmQgCgXAkgqQATgYAhgjQAqg1ASgeQAegxAIgtQAOhVBfBqQBMBUAgBEQAdA+gDAvQgEAzgoA0QgjAvgSAVQghAkgfAVQgeAVgcAAQgNAAgNgEgAgviGQgcAvguA4QgZAfgMATQgVAjAIAUQAIATASAXIAfAnQAtA7AWAQQAsAfArghQAbgUAbggQAQgSAXggIAGgKQAng2gFg1QgEgrgnhAQgggzgYgfQglgwgigVQgPA5gjA6g"); 198 | this.shape.setTransform(0,0,0.8,0.8); 199 | 200 | this.shape_1 = new cjs.Shape(); 201 | this.shape_1.graphics.f("#EFD659").s().p("AgQgMQAAgDAYAUIAJAIIghgZg"); 202 | this.shape_1.setTransform(8.5,-13.7,0.8,0.8); 203 | 204 | this.shape_2 = new cjs.Shape(); 205 | this.shape_2.graphics.f("#EFD659").s().p("AgqD9QglgUglgvQghgpgTgtQgJgUACgYQACgcAPgNQALghAggqIA/hOQAEgEAehFQAUgzAcAAQARgBAXAgQAVAeADATQBZBFgHB/QgGB3hKBGIgKALQgcAfgfAMQgQAGgPAAQgUAAgSgKg"); 206 | this.shape_2.setTransform(-0.3,-0.1,0.8,0.8); 207 | 208 | this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.shape_2},{t:this.shape_1},{t:this.shape}]}).wait(1)); 209 | 210 | }).prototype = getMCSymbolPrototype(lib.GreenChunk2, new cjs.Rectangle(-17.1,-22.8,34.2,45.6), null); 211 | 212 | 213 | (lib.GreenChunk1 = function(mode,startPosition,loop) { 214 | this.initialize(mode,startPosition,loop,{}); 215 | 216 | // Layer 1 217 | this.shape = new cjs.Shape(); 218 | this.shape.graphics.f("#2B3526").s().p("AhqDZQgIgBgUhBQgXhKgDgGQgdg6gKggQgOg1ANguQAMgtApgjQAugnArAPQAQAFAZASQAbAUANAGQALAFAdAKQAaAJAOAIQAfARATA7QAdBWACAEQAwBbgyA3QgsAyhoAFIgdABQgzAAg8gKgAh1ivQgdASgRAmQgOAfAJAqQAFAVATAxQAfA9AHAQQATAtAEAlQAxAHAiAAQAtAAAlgLQAmgKAQgJQAggPAHgYQAHgYgVgoQgagrgHgRQgLgrgHgVQgMgmgdgKQhIgZgxgiQgQgLgRAAQgQAAgQAKg"); 219 | this.shape.setTransform(0,0,0.8,0.8); 220 | 221 | this.shape_1 = new cjs.Shape(); 222 | this.shape_1.graphics.f("#7E9140").s().p("AhtCkQgPgvgIgRQgohOgGhPQgJhtBKgaQAPgGASADQASADAMAKQAOALAMACQAZAEAGACQAgAKAdAYQAbAWASAeIAGAKQAPAcAMAjQAaAPAEA2IAAABQAFAQgCASQgCARgJAOIgGAKQgUAlgrAPQgIADgHgFIgFABQgXAGgsgCQgwgCgTADIgHAAQgfAAgQghg"); 223 | this.shape_1.setTransform(0.6,0.5,0.8,0.8); 224 | 225 | this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.shape_1},{t:this.shape}]}).wait(1)); 226 | 227 | }).prototype = getMCSymbolPrototype(lib.GreenChunk1, new cjs.Rectangle(-16.6,-18.2,33.3,36.3), null); 228 | 229 | 230 | (lib.EnemyBeaverFace = function(mode,startPosition,loop) { 231 | this.initialize(mode,startPosition,loop,{}); 232 | 233 | // Layer 1 234 | this.shape = new cjs.Shape(); 235 | this.shape.graphics.f("#000000").s().p("AgqBIQgRgeAAgqQAAgpARgdQASgeAYAAQAZAAASAeQARAdAAApQAAAqgRAeQgSAdgZAAQgYAAgSgdg"); 236 | this.shape.setTransform(-8.8,-131.7); 237 | 238 | this.shape_1 = new cjs.Shape(); 239 | this.shape_1.graphics.f("#000000").s().p("AADBMQhMgFgzgWQg4gYAQgcQAwhVCdAPQAhADAoASQAyAWgBAZIABACQASAsg0AVQgkAPg6AAIghgBg"); 240 | this.shape_1.setTransform(-3.4,-90.7); 241 | 242 | this.shape_2 = new cjs.Shape(); 243 | this.shape_2.graphics.f("#2B3526").s().p("Ai9GAQhqgVhPgwQjAh3A2jTQApijCFhpQCHhrCxgFQC2gGCjBQQDGBgAHCoQAHCwi1CHQicB0i9AWQghAEgjAAQg+AAhAgMgAgNloQi8ADiCBzQh0BogbCNQgdCfBxBmQB7BvDJgIQC0gHCQhdIAEgDQBMgyA0hFQA2hHAQhJQAkisiwhkQichZioAAIgJAAg"); 244 | this.shape_2.setTransform(0,-76.8); 245 | 246 | this.shape_3 = new cjs.Shape(); 247 | this.shape_3.graphics.f("#4C4C4C").s().p("AhDEMQhbgDgohFQggg4gDhUQgCg1ALhbQAEgjAMAIIAIAHQADADAAgEIACBcQACBBADAZQAFAtAFAVQAKAlAUAVQAqAtBdgRQBNgOA5gpQA3goAOhJQALg6gRhNQgMg5gdhNQgKgbARgUQARgUAMAfIAEAKIAFAOQCFFvjoBdQhSAghBAAIgHAAg"); 248 | this.shape_3.setTransform(17.5,-26.8); 249 | 250 | this.shape_4 = new cjs.Shape(); 251 | this.shape_4.graphics.f("#4C4C4C").s().p("AhkCkQhMgngChfQgCg8AhhmQAUhAAOADQAOAEgMAzQgRBKgEAXQgKA/AGAiQASBfBvAFQAlACCHgYQAlAIg6AaQg1AZgWAAIgRABQheAAg6geg"); 252 | this.shape_4.setTransform(-18.4,-23.4); 253 | 254 | this.shape_5 = new cjs.Shape(); 255 | this.shape_5.graphics.f("#4C4C4C").s().p("ADdFdQgFgDALgeQAUg1AIgqQAVhtgIhnQgSh3gSgsQgkhZhDgnQhNgshdAVQhaAVg8BEQhFBPgOB5QgMBjAbB2QALAvAWBIQgXAHgJgNQgCgBgPgkQgjhPgDhqQgDhZAdhbQAehhA3hFQCHimDABZQCiBLAYDwQAKBigSBpQgQBkgjBMQgagLgFgDg"); 256 | this.shape_5.setTransform(5.2,-143.1); 257 | 258 | this.shape_6 = new cjs.Shape(); 259 | this.shape_6.graphics.f("#FFFFFF").s().p("AguAOQgjgJAHgQQAIgQAkAFIAwAEQAdABARAFIACABIAAAAIABAAQAfALhFAYIgMAAQgbAAgkgKg"); 260 | this.shape_6.setTransform(-17.1,-12.5); 261 | 262 | this.shape_7 = new cjs.Shape(); 263 | this.shape_7.graphics.f("#FFFFFF").s().p("AgWAAQAAgXAWAAQAXAAAAAXQAAAYgXAAQgWAAAAgYg"); 264 | this.shape_7.setTransform(-28,-17.4); 265 | 266 | this.shape_8 = new cjs.Shape(); 267 | this.shape_8.graphics.f("#FFFFFF").s().p("AgNAXQgMgFAAgSQAAgPARgGQAOgFAMAJQALAIgEALQgEAKgNAHQgIAFgHAAIgGgBg"); 268 | this.shape_8.setTransform(3.5,-13.7); 269 | 270 | this.shape_9 = new cjs.Shape(); 271 | this.shape_9.graphics.f("#FFFFFF").s().p("AhQAzQgPgEgOgMQgSgPAHgOQAGgJAgABIAqAAIBLgjQAwgWAYAKIABABIABAAIACABQApAZhkApQhPAigmAAQgJAAgGgCg"); 272 | this.shape_9.setTransform(19,-12); 273 | 274 | this.shape_10 = new cjs.Shape(); 275 | this.shape_10.graphics.f("#EADFC3").s().p("ABsDkQhhgCgghMQgyBDhwgJQhvgIgrhEQgXgjALhKQAEgXAWhZQANg0AIgEQAPgLBFAVQBUAYBfgFQBZgGBXgfQAGgCApgYQAsgZAcgLQBeglgIBQIgBADIAAADQgCAjAGA6QAJBKAAAYQABBxhZAxQhKAphNAAIgHAAg"); 276 | this.shape_10.setTransform(1.4,-26.5); 277 | 278 | this.shape_11 = new cjs.Shape(); 279 | this.shape_11.graphics.f("#9FA355").s().p("AhXC+QiTgCh1g6Qhvg3gPhEIgUg9QgNguAHggQAkAAA3AeIBIAqQA+AcBLAPQA8ALBQAEQCSAHCIg8ICahSQCXhMgTAjQhrDEirBeQiNBOilAAIgIAAg"); 280 | this.shape_11.setTransform(0.3,-58.5); 281 | 282 | this.shape_12 = new cjs.Shape(); 283 | this.shape_12.graphics.f("#B0BA5F").s().p("Al3EwQh6hOACiTQACiuCHiJQCQiSDLAAQDRAACVBqQCVBqAACWQAACVikB7QimB7jRAAQjXAAh1hLg"); 284 | this.shape_12.setTransform(0.3,-76.4); 285 | 286 | this.shape_13 = new cjs.Shape(); 287 | this.shape_13.graphics.f("#FFFFFF").s().p("AguAAQAAgSAMgOQANgPAVgBQAWABANAPQAMAOAAASQAAAxgvgBQguABAAgxg"); 288 | this.shape_13.setTransform(20.3,-153); 289 | 290 | this.shape_14 = new cjs.Shape(); 291 | this.shape_14.graphics.f("#FFFFFF").s().p("AgtAxQgbgSgBgaQgBgXASgVQASgVAZgHQAcgIAYAOQAfATADAfQADAagTAZQgTAZgcAFIgKABQgYAAgVgWg"); 292 | this.shape_14.setTransform(9,-164); 293 | 294 | this.shape_15 = new cjs.Shape(); 295 | this.shape_15.graphics.f("#EADFC3").s().p("AjQEqQhXh7AAivQAAitBXh8QBXh7B5AAQB/AABTBwQBWB1AAC/QAACvhWB7QhXB7h7AAQh5AAhXh7g"); 296 | this.shape_15.setTransform(5,-135.2); 297 | 298 | this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.shape_15},{t:this.shape_14},{t:this.shape_13},{t:this.shape_12},{t:this.shape_11},{t:this.shape_10},{t:this.shape_9},{t:this.shape_8},{t:this.shape_7},{t:this.shape_6},{t:this.shape_5},{t:this.shape_4},{t:this.shape_3},{t:this.shape_2},{t:this.shape_1},{t:this.shape}]}).wait(1)); 299 | 300 | }).prototype = getMCSymbolPrototype(lib.EnemyBeaverFace, new cjs.Rectangle(-52.5,-179.4,105,179.4), null); 301 | 302 | 303 | (lib.EnemyBeaverBody = function(mode,startPosition,loop) { 304 | this.initialize(mode,startPosition,loop,{}); 305 | 306 | // Layer 1 307 | this.shape = new cjs.Shape(); 308 | this.shape.graphics.f("#2B3526").s().p("AhaAJQgogPAPgKQAOgJAiAHQAsAKAvgDQAigCAvgKIALgDQAOgDgiAYQgiAYgMACQgZAGgYAAQgsAAgvgSg"); 309 | this.shape.setTransform(-20.9,-14.9); 310 | 311 | this.shape_1 = new cjs.Shape(); 312 | this.shape_1.graphics.f("#2B3526").s().p("AANAFQgNgKgdAKQgdALgDgEQgIgJANgKQANgLAWgFQA4gNAWAlIABACQANAYgMAAQgMAAgigWg"); 313 | this.shape_1.setTransform(-64.8,-190.9); 314 | 315 | this.shape_2 = new cjs.Shape(); 316 | this.shape_2.graphics.f("#2B3526").s().p("Ag/AiQgKgOAPgUQAOgSAagNQAagOAXABQAaACAJAXIABAAQAGAQgegCQghgFgEABQgXAHgUAhQgHAMgEABIgCABQgFAAgIgLg"); 317 | this.shape_2.setTransform(33.9,-192.6); 318 | 319 | this.shape_3 = new cjs.Shape(); 320 | this.shape_3.graphics.f("#2B3526").s().p("AhyIGQgNgPAJgQQAOgdAYgeQBChaAdg7QBNiYAXiqQAcjVhAhzQgTgggcgYQgegbgggJQgTgFgzAJQgsAHgVgNQgjgVBHgWQA9gTAaABQAhABAjATQAiASAXAaQBVBgAJCuIAAAOQAGC2g9C+QhJDiiFBmQgHAFgHAAQgIAAgIgJg"); 321 | this.shape_3.setTransform(68.3,-79); 322 | 323 | this.shape_4 = new cjs.Shape(); 324 | this.shape_4.graphics.f("#2B3526").s().p("AihREQhygJhjgjQgXgJguAbQgtAbghgMQi1g9ggk5QgLhsAGiWIAMjUQANklAsjgQAZiAAihqQg+gkgVhTQgVhQAQhgQAPhaAqhOQAzheBPgGQBAgFBlA1QAiASA9gdQBXgrAOgDQBmgXBpAcQAKACBRApQBCAhASgIQAdgLA3gaQAygVAlgIQBVgSBIA2QBAAxAnBdQAkBZgDBcQgDBhgwA7QghAogzATQAYBCAPAzQAkB0AaB7QAVBnAQCFIAXDRIADAZIAAADIADAkIACAMQAKBoACA5QAFCIgUBnQgaCDhEBWQhLBehKgGQgogDgdgeQgUgUgKAAIgnAOQi5A7jIAAQg8AAg9gFgAlbP2IBEAYQBRAOBjAAQBNgBBlgKQDPgWCPhJQAkgXAcgPQA3gegHAXQgRA+haApQBVBTBWiOQAfgzAZhGQAUg7AFgkIACgMIABgIIAAgEQAPiFgRiwQgFg4glkUQgslDhkkBQhrkQisiXQjfjFjvCCQhyA/hVCNQg/Bpg0CfQhcEagcFcQgPCygDCDQgECqAOCMQAIBYAPA7QAWBSAqAyQAfAkAvARQA6AVAWgrQiChZAigVQACgBA4ApQA7AsAIADIAEgBQAMAAAtARgAFjwDIgDACIg1AXQgfAOgYAAQBkBOBQB7QBCBnA3CLQBQgfAVhbQAQhKgZhbQgih2hBg1Qgugmg7AAQglAAgpAOgApiu/IgEAHQg0BfgHBuQgKCLBWA2QAviJA3hhQBEh7BZhOQgggFgxgSQgxgTgUgDQgJgCgJAAQg8AAgsBNg"); 325 | this.shape_4.setTransform(-11.8,-109.8); 326 | 327 | this.shape_5 = new cjs.Shape(); 328 | this.shape_5.graphics.f("#9FA355").s().p("AAcBSQgXgCgXgYQgXgFgfg/Qgfg/AZAJQAlANAuAAQA9AAAZgcIghB7QgCAogaAAIgCAAg"); 329 | this.shape_5.setTransform(-72.6,-172.8); 330 | 331 | this.shape_6 = new cjs.Shape(); 332 | this.shape_6.graphics.f("#9FA355").s().p("AhCAGIgwhwQBJA8A+ABQAxAAAtgjIgWBUQgfBZgvANIgGABQgaAAgxhlg"); 333 | this.shape_6.setTransform(44.2,-174.2); 334 | 335 | this.shape_7 = new cjs.Shape(); 336 | this.shape_7.graphics.f("#B0BA5F").s().p("ABQEQQgegMgWhQQgdhqgCgFQgXgrgfgpQgRgYgtg3Qg2ghgagXQgwgtBUgSICIg9QCrAjA2CnQAVBAgCBGQgBBAgTAsQgOAjghAjQggAjgZAAQgHAAgGgDg"); 337 | this.shape_7.setTransform(33.5,-189.5); 338 | 339 | this.shape_8 = new cjs.Shape(); 340 | this.shape_8.graphics.f("#B0BA5F").s().p("AiBDrQgQgigKgKQgxgxAZiOQAWh8AqhEQBSiEDeCDQg6Ach0DWQg4BsgvBlIgGABQgUAAgPgYg"); 341 | this.shape_8.setTransform(-62.4,-189.1); 342 | 343 | this.shape_9 = new cjs.Shape(); 344 | this.shape_9.graphics.f("#727D3D").s().p("AhVFTQiKgFhlgXQgngTgVgHQgmgMgPAaQgkA6hVgxQhJgrgcg0QgSg3gRhPQghifAJh8QCRBxDGArQC4AoDNgaQDGgYC3hQQC5hRCFh5QAcEzhKC1QglBagrAeQgOAhgyAKQgwAJgfgUQgSgMgIgfQgEgOgkARQipBRjwAAIg2gCg"); 345 | this.shape_9.setTransform(-11.3,-36.5); 346 | 347 | this.shape_10 = new cjs.Shape(); 348 | this.shape_10.graphics.f("#7E9140").s().p("Am5PjQiMhKg9iXQg2iDgCjUQgBicAfkSQA4npCGkGQCik7EYAAQB0AAB2BWQByBTBhCWQDPE/AtG1QAiFNADBNQAIDSgxB9Qg7CXibBNQiqBVkzAGIgcAAQjsAAiPhLg"); 349 | this.shape_10.setTransform(-12.3,-109.6); 350 | 351 | this.shape_11 = new cjs.Shape(); 352 | this.shape_11.graphics.f("#4B4F29").s().p("AikFJQhBiJAAjAQAAi/BBiJQBCiIBcAAQBzAABBBeQBTB7goD3QgkDbgtBtQg6CJhUAAQhcAAhCiIg"); 353 | this.shape_11.setTransform(59.5,-81.8); 354 | 355 | this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.shape_11},{t:this.shape_10},{t:this.shape_9},{t:this.shape_8},{t:this.shape_7},{t:this.shape_6},{t:this.shape_5},{t:this.shape_4},{t:this.shape_3},{t:this.shape_2},{t:this.shape_1},{t:this.shape}]}).wait(1)); 356 | 357 | }).prototype = getMCSymbolPrototype(lib.EnemyBeaverBody, new cjs.Rectangle(-86,-219.5,172.1,219.5), null); 358 | 359 | 360 | (lib.EarChunk1 = function(mode,startPosition,loop) { 361 | this.initialize(mode,startPosition,loop,{}); 362 | 363 | // Layer 1 364 | this.shape = new cjs.Shape(); 365 | this.shape.graphics.f("#2B3526").s().p("AAKCiQgQgKgbgZQg0gugPgmQgRgtAeg2QAeg4AnghQA2gxArAjQAQAOADAgQAAALgCApQgBAXAFAmQAHAuAAAOQABArgFAYQgKAngeAHIgMACQgTAAgWgNgAgKhqQgQASghAuQgeAqAfA3QAaAuAwAgIABABIADABQAkAXAPghQAKgYgDgtQAAg9gCgoQgEhNgRgOQgGgFgHAAQgUAAggAjg"); 366 | this.shape.setTransform(0,0,1.32,1.32); 367 | 368 | this.shape_1 = new cjs.Shape(); 369 | this.shape_1.graphics.f("#B0BA5F").s().p("AAACMQgpgdgdgrQgjg3AWglQASgfAmgmIBBg9QAcgaAZDHIABADIAAANQAFB7gyAAQgTAAgcgSg"); 370 | this.shape_1.setTransform(-0.3,-0.4,1.32,1.32); 371 | 372 | this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.shape_1},{t:this.shape}]}).wait(1)); 373 | 374 | }).prototype = getMCSymbolPrototype(lib.EarChunk1, new cjs.Rectangle(-14.1,-23,28.3,46.1), null); 375 | 376 | 377 | (lib.MooseTween = function(mode,startPosition,loop) { 378 | this.initialize(mode,startPosition,loop,{}); 379 | 380 | // Moose 381 | this.instance = new lib.MooseToothShine("synched",0); 382 | this.instance.parent = this; 383 | this.instance.setTransform(30.9,24.8,1,1,0,0,0,0,-3.5); 384 | 385 | this.instance_1 = new lib.MooseToothShine("synched",0); 386 | this.instance_1.parent = this; 387 | this.instance_1.setTransform(-7.1,23.7,1,1,0,0,0,0,-3.5); 388 | 389 | this.instance_2 = new lib.MooseToothShine("synched",0); 390 | this.instance_2.parent = this; 391 | this.instance_2.setTransform(-41.1,22.4,1,1,0,0,0,0,-3.5); 392 | 393 | this.shape = new cjs.Shape(); 394 | this.shape.graphics.f("#49473C").s().p("AGFCDQgwAAg6geQhAgggbgsIgIAVQgIASgQANQgxAoh7gEQhDgFgugnQgcgYgKgYQgUAjgtAXQgrAWgrACQgyACgqgPQgvgSgagmQgGgIgLgnQgNgsAAgXQhMgHAAgIQAAgMD5AJIEdALQBMgEDlgWQCigPBrgCIAOAAIARAAIAHAAQAIACAKAqQAMAxgHArQgUB9icAAIgTAAgAGohZQiNAEhPAOQACBeBTAuQA/AiA+gHQBmgLAig/QAagxgVhBIiDADgAiWgcQAFAbAMASQAjA9BiAGQBuAGAphAQAPgZAKhGQhRAHhKADQh4AGg5gGQACAGAEAZgAnaglQAIAgAOAUQAsBBB8gKQAngHAbgTQAigYACgiQgDgZABgVQi7gIhvgJQADAJAFAfg"); 395 | this.shape.setTransform(-6.8,21); 396 | 397 | this.shape_1 = new cjs.Shape(); 398 | this.shape_1.graphics.f("#494729").s().p("AguAMQhpgUACgPQgBACCOACQCNACALgCIAAAAQAWgEg/AnQgSAIggAAQgoAAg7gMg"); 399 | this.shape_1.setTransform(-2.8,45.7); 400 | 401 | this.shape_2 = new cjs.Shape(); 402 | this.shape_2.graphics.f("#494729").s().p("AHyPEQhZgJglh9QgTg+gKiJQhjAYjpgSQj1gUh8AVIAFBXQACBNgGAaQgQA8g3AbQg1Aag8gSQh2glg3iLQgphogDiUQgDjWABh5QADi4AMiWQARjDAehuQAtilBjhoQBThZB4g3QBwgzCAgPQExglDgCvQCEBYBhDmQAvBwAQBLQAwDgADEJQADEDgpEJQgRBvgvBHQg5BVhWAAIgSgBgAI5IkQADANg0ASIhFAUQguAIgMAFQgRAJAEAnQAJBYAGAfQAOBHAdAoQArA8BFgcQA9gYAjg+QAmhBAWkXQAXkjgRkNQgYlfiZjmQiPjZkXg0QkKgxjpCBQiKBMhLCKQg/BzgZCxQg4GHAXF4IAHCAQAGBOAOA1QAnCRB3AtQCBAcAViBQAHgqgHgzQgGgrgGgFQhJAEhCgNQBYgOBygLQDkgWCWASQCaASDMgpIB4gcQAegGALAAQAGAAAAABg"); 403 | this.shape_2.setTransform(0,-0.1); 404 | 405 | this.shape_3 = new cjs.Shape(); 406 | this.shape_3.graphics.f("#D1B84E").s().p("AGDCfQgHghgEhNQgFhLgIgiQiMAckRgOQkVgOgxAKQAKCJgNA5QgaBvhogQQjvgmATm5QCxAgEOAMQIdAYHYhnIgUDoQgLBwgRA8QgUBKgkAjQgmAlhCABIgCAAQhuAAgYh1g"); 407 | this.shape_3.setTransform(-0.1,67); 408 | 409 | this.shape_4 = new cjs.Shape(); 410 | this.shape_4.graphics.f("#EADFC3").s().p("ACHBqQhkgYgnhcQgPAvgqAiQg5AthOgQQhdgUgdgbQgkghgXhmILZgfQAgAsgHA6QgMBbiKAfQgPADgPAAQgeAAgggIg"); 411 | this.shape_4.setTransform(13.1,21.2); 412 | 413 | this.shape_5 = new cjs.Shape(); 414 | this.shape_5.graphics.f("#EADFC3").s().p("AAABfQh1gDgghVQgRgrAEg6IFDAQQAJBCgSAmQggBFhvAAIgJAAg"); 415 | this.shape_5.setTransform(-40.3,21.1); 416 | 417 | this.shape_6 = new cjs.Shape(); 418 | this.shape_6.graphics.f("#D1B84E").s().p("ADwA7QhCgWgWgiQg/BJh1ABQh3ACg+hKQgYAagvAPQgvAPgxgEQh6gHgRhdQAAADA2gJQBUgPBbgHQFKgaHUA5QAQA7gsAhQgmAbhKABIgDAAQhCAAg/gVg"); 419 | this.shape_6.setTransform(-1.2,30.6); 420 | 421 | this.shape_7 = new cjs.Shape(); 422 | this.shape_7.graphics.f("#EFD659").s().p("AHdOqQg3gagZh2QgSiGgIgpQhkAQkjgRQkQgQhYAYQABAOAHA5QAFA7gGApQgUB+iCgOQhugegzh8QglhbgFiKQgJkSACilQAEl7AwiQQAsjuCuiHQCXh3DZgSQDHgRCwBIQCyBJA+CAQCyC9AeGtQAVEpg0H1QgVBjgvBAQgtA9g3AAQgZAAgbgMg"); 423 | this.shape_7.setTransform(-0.4,0); 424 | 425 | this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.shape_7},{t:this.shape_6},{t:this.shape_5},{t:this.shape_4},{t:this.shape_3},{t:this.shape_2},{t:this.shape_1},{t:this.shape},{t:this.instance_2},{t:this.instance_1},{t:this.instance}]}).wait(1)); 426 | 427 | }).prototype = p = new cjs.MovieClip(); 428 | p.nominalBounds = new cjs.Rectangle(-76.1,-96.7,152.3,193.1); 429 | 430 | 431 | (lib.MooseEyes = function(mode,startPosition,loop) { 432 | this.initialize(mode,startPosition,loop,{}); 433 | 434 | // MooseEyes 435 | this.instance = new lib.MooseEye("synched",0); 436 | this.instance.parent = this; 437 | this.instance.setTransform(0.4,-59.5,1,1,0,0,0,0,-49.6); 438 | 439 | this.timeline.addTween(cjs.Tween.get(this.instance).wait(1)); 440 | 441 | // MooseEyeShadow 442 | this.shape = new cjs.Shape(); 443 | this.shape.graphics.f("#D1B84E").s().p("AjFA3QkcCFhDjOQDehjHFACQCmABCEAPQB8ANAAAOQAAAngDAOQgHAegXAPQgwAgg+AJQheAOg/g7QgOAgg7AZQg5AYhKAIQglAFgfAAQh6AAg0g9g"); 444 | this.shape.setTransform(-0.5,-16.5); 445 | 446 | this.timeline.addTween(cjs.Tween.get(this.shape).wait(1)); 447 | 448 | }).prototype = getMCSymbolPrototype(lib.MooseEyes, new cjs.Rectangle(-63.4,-108.9,127.6,104), null); 449 | 450 | 451 | (lib.Balls = function(mode,startPosition,loop) { 452 | this.initialize(mode,startPosition,loop,{}); 453 | 454 | // moose 455 | this.instance = new lib.MooseEyes(); 456 | this.instance.parent = this; 457 | this.instance.setTransform(-3.2,-36.5,0.944,0.828,0,0,0,0,-54.6); 458 | 459 | this.instance_1 = new lib.MooseTween("synched",0); 460 | this.instance_1.parent = this; 461 | this.instance_1.setTransform(1,78.2,0.944,0.828,0,0,0,-0.5,89.9); 462 | 463 | this.instance_2 = new lib.MooseAntler(); 464 | this.instance_2.parent = this; 465 | this.instance_2.setTransform(-89.4,-42.1,0.944,0.828,0,0,180,0,-31.4); 466 | 467 | this.instance_3 = new lib.MooseAntler(); 468 | this.instance_3.parent = this; 469 | this.instance_3.setTransform(91.4,-42.1,0.944,0.828,0,0,0,0,-31.4); 470 | 471 | this.instance_4 = new lib.EnemyBeaverFace(); 472 | this.instance_4.parent = this; 473 | this.instance_4.setTransform(-13.2,5.3,0.689,0.513,0,0,0,-4.2,-76.2); 474 | 475 | this.instance_5 = new lib.EnemyBeaverBody(); 476 | this.instance_5.parent = this; 477 | this.instance_5.setTransform(-3.7,53.8,0.689,0.513,0,0,0,-14.1,-3.8); 478 | 479 | this.instance_6 = new lib.MooseChunk1(); 480 | this.instance_6.parent = this; 481 | this.instance_6.setTransform(0,0.1); 482 | 483 | this.instance_7 = new lib.GreenChunk2(); 484 | this.instance_7.parent = this; 485 | 486 | this.instance_8 = new lib.GreenChunk1(); 487 | this.instance_8.parent = this; 488 | this.instance_8.setTransform(0,0.1); 489 | 490 | this.instance_9 = new lib.EarChunk1(); 491 | this.instance_9.parent = this; 492 | 493 | this.instance_10 = new lib.PinkChunk3(); 494 | this.instance_10.parent = this; 495 | this.instance_10.setTransform(0,0.1); 496 | 497 | this.instance_11 = new lib.PinkChunk1(); 498 | this.instance_11.parent = this; 499 | this.instance_11.setTransform(0,0.1); 500 | 501 | this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.instance_3},{t:this.instance_2},{t:this.instance_1},{t:this.instance}]}).to({state:[{t:this.instance_5},{t:this.instance_4}]},1).to({state:[{t:this.instance_6}]},1).to({state:[{t:this.instance_7}]},1).to({state:[{t:this.instance_8}]},1).to({state:[{t:this.instance_9}]},1).to({state:[{t:this.instance_10}]},1).to({state:[{t:this.instance_11}]},1).wait(1)); 502 | 503 | // Layer 2 504 | this.circle = new lib.Circle(); 505 | this.circle.name = "circle"; 506 | this.circle.parent = this; 507 | this.circle.setTransform(0,0,1.5,1.5); 508 | 509 | this.timeline.addTween(cjs.Tween.get(this.circle).wait(1).to({scaleX:1,scaleY:1},0).wait(1).to({scaleX:0.3,scaleY:0.3},0).wait(6)); 510 | 511 | }).prototype = p = new cjs.MovieClip(); 512 | p.nominalBounds = new cjs.Rectangle(-119,-82.5,240,166.1); 513 | 514 | 515 | // stage content: 516 | (lib.balls = function(mode,startPosition,loop) { 517 | this.initialize(mode,startPosition,loop,{}); 518 | 519 | // art 520 | this.instance = new lib.Balls(); 521 | this.instance.parent = this; 522 | this.instance.setTransform(267.6,204.1); 523 | 524 | this.timeline.addTween(cjs.Tween.get(this.instance).wait(1)); 525 | 526 | }).prototype = p = new cjs.MovieClip(); 527 | p.nominalBounds = new cjs.Rectangle(346.8,321.6,408.5,212.7); 528 | // library properties: 529 | lib.properties = { 530 | id: '9773661AD0444F38BA91B914333BDCBE', 531 | width: 550, 532 | height: 400, 533 | fps: 24, 534 | color: "#FFFFFF", 535 | opacity: 1.00, 536 | manifest: [], 537 | preloads: [] 538 | }; 539 | 540 | 541 | 542 | // bootstrap callback support: 543 | 544 | (lib.Stage = function(canvas) { 545 | createjs.Stage.call(this, canvas); 546 | }).prototype = p = new createjs.Stage(); 547 | 548 | p.setAutoPlay = function(autoPlay) { 549 | this.tickEnabled = autoPlay; 550 | } 551 | p.play = function() { this.tickEnabled = true; this.getChildAt(0).gotoAndPlay(this.getTimelinePosition()) } 552 | p.stop = function(ms) { if(ms) this.seek(ms); this.tickEnabled = false; } 553 | p.seek = function(ms) { this.tickEnabled = true; this.getChildAt(0).gotoAndStop(lib.properties.fps * ms / 1000); } 554 | p.getDuration = function() { return this.getChildAt(0).totalFrames / lib.properties.fps * 1000; } 555 | 556 | p.getTimelinePosition = function() { return this.getChildAt(0).currentFrame / lib.properties.fps * 1000; } 557 | 558 | an.bootcompsLoaded = an.bootcompsLoaded || []; 559 | if(!an.bootstrapListeners) { 560 | an.bootstrapListeners=[]; 561 | } 562 | 563 | an.bootstrapCallback=function(fnCallback) { 564 | an.bootstrapListeners.push(fnCallback); 565 | if(an.bootcompsLoaded.length > 0) { 566 | for(var i=0; i 2 | 3 | 4 | 5 | CreateJS export from Moose & Beaver Balls 6 | 7 | 8 | 9 | 10 | 11 | 12 | 26 | 27 | 230 | 231 | 232 | 233 | 234 | 235 | -------------------------------------------------------------------------------- /GettingStartedWithCreateJS/GettingStartedWithCreateJS.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CreateJS/sandbox/bfcfb5afaaed512c983159285a582dd8c0bbb6ab/GettingStartedWithCreateJS/GettingStartedWithCreateJS.png -------------------------------------------------------------------------------- /GettingStartedWithCreateJS/README.md: -------------------------------------------------------------------------------- 1 | Getting started with CreateJS 2 | ======= 3 | 4 | Get started creating rich interactive experiences and games in HTML5 using CreateJS. 5 | 6 | * Introduces EaselJS (high performance 2D graphics) 7 | * TweenJS (animation) 8 | * SoundJS (cross-browser/device audio) 9 | * PreloadJS (preload and asset management). 10 | 11 | The code sample found within is to be accompanied by [Getting started with CreateJS](https://www.youtube.com/watch?v=OWHJa0jKJgo) video. 12 | 13 | ![ScreenShot](https://raw.github.com/CreateJS/sandbox/master/GettingStartedWithCreateJS/GettingStartedWithCreateJS.png) 14 | 15 | For more information 16 | --------------------- 17 | Please visit the following: 18 | 19 | - [CreateJS.com](http://www.createjs.com) 20 | - [twitter:@CreateJS](http://www.twitter.com/CreateJS) 21 | - [Blog](http://www.blog.createjs.com) 22 | - [Community Forum](http://www.community.createjs.com) 23 | - [CreateJS Git Hub](https://github.com/CreateJS) 24 | 25 | 26 | If anyone has any suggestions for how we can improve the libraries, or want to share examples or fixes don't hesitate to get in touch.
27 | 28 | -------------------------- 29 | All code is copyright 2013 gskinner.com, inc. and is free to use, copy, and modify under the MIT license. 30 | All art & graphics are copyright 2013 gskinner.com, inc. and cannot be used without permission. -------------------------------------------------------------------------------- /GettingStartedWithCreateJS/assets/daisy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CreateJS/sandbox/bfcfb5afaaed512c983159285a582dd8c0bbb6ab/GettingStartedWithCreateJS/assets/daisy.png -------------------------------------------------------------------------------- /GettingStartedWithCreateJS/assets/pop.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CreateJS/sandbox/bfcfb5afaaed512c983159285a582dd8c0bbb6ab/GettingStartedWithCreateJS/assets/pop.mp3 -------------------------------------------------------------------------------- /GettingStartedWithCreateJS/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 57 | 58 | 59 | 60 | Alternative Content 61 | 62 | 63 | 64 | -------------------------------------------------------------------------------- /Kaleidoscope/Kaleidoscope.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Kaleidoscope 3 | * Visit http://createjs.com/ for documentation, updates and examples. 4 | * 5 | * Copyright (c) 2013 gskinner.com, inc. 6 | * 7 | * Permission is hereby granted, free of charge, to any person 8 | * obtaining a copy of this software and associated documentation 9 | * files (the "Software"), to deal in the Software without 10 | * restriction, including without limitation the rights to use, 11 | * copy, modify, merge, publish, distribute, sublicense, and/or sell 12 | * copies of the Software, and to permit persons to whom the 13 | * Software is furnished to do so, subject to the following 14 | * conditions: 15 | * 16 | * The above copyright notice and this permission notice shall be 17 | * included in all copies or substantial portions of the Software. 18 | * 19 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 20 | * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 21 | * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 22 | * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 23 | * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 24 | * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 25 | * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 26 | * OTHER DEALINGS IN THE SOFTWARE. 27 | */ 28 | 29 | (function() { 30 | /** 31 | * Draws a kaleidoscope based on the specified source DisplayObject. Supports any number 32 | * of slices, and different slice sizes within the same kaleidoscope. 33 | * 34 | * @class Kaleidoscope 35 | * @param radius {Number} The radius of the kaleidoscope. 36 | * @param source {DisplayObject} The DisplayObject to use as the source. 37 | * @param [slices=8] {Number} The number of slices to draw. 38 | * @param [pattern] {Array} Pattern of relative ratios for the slice sizes. For example, passing [1,2] would result in every second slice being twice as large as it's neighbors. 39 | * @extends DisplayObject 40 | * @constructor 41 | **/ 42 | function Kaleidoscope(radius, source, slices, pattern) { 43 | this.DisplayObject_constructor(); 44 | 45 | // public properties: 46 | /** 47 | * The DisplayObject that will be drawn into each slice. Any transformations on the 48 | * source display object will be applied when the slice is drawn. 49 | * 50 | * The source will be drawn multiple times (ex. 20 times for a 10 slice kaleidoscope). 51 | * If the source is expensive to draw (a complex Shape, or Container with 52 | * many children), then you may wish to pre-render the source a single time using 53 | * the cache() method. 54 | * @property source 55 | * @type DisplayObject 56 | * @default null 57 | **/ 58 | p.source = null; 59 | 60 | /** 61 | * The radius of the kaleidoscope in pixels. 62 | * @property radius 63 | * @type Number 64 | * @default 0 65 | **/ 66 | p.radius = 0; 67 | 68 | /** 69 | * Specifies the amount to overlap each slice with its neighbours to reduce seams 70 | * between them. Generally a value of 0.6 works well, but you may wish to adjust this 71 | * for sources with transparency. 72 | * 73 | * You may still see seams if your source draws multiple times into each slice. For 74 | * example, a Container with multiple children. Pre-rendering the source by using the 75 | * cache() method should resolve this. 76 | * @property pad 77 | * @type Number 78 | * @default 0 79 | **/ 80 | p.pad = 0; 81 | 82 | // private properties: 83 | /** 84 | * @property _slices 85 | * @type Array 86 | * @private 87 | **/ 88 | p._slices = null; // size in radians of each slice. 89 | 90 | // constructor: 91 | var i; 92 | if (!pattern) { pattern = [1]; } 93 | if (!slices) { slices = 8; } 94 | this.radius = radius; 95 | this.source = source; 96 | var l = pattern.length; 97 | if (slices/pattern.length%1 != 0) { throw "slices must be divisible by pattern length"; } 98 | var ttl = 0; 99 | for (i=0; i 0 && this.scaleX != 0 && this.scaleY != 0 && hasContent); 116 | }; 117 | 118 | /** 119 | * Draws the display object into the specified context ignoring it's visible, alpha, shadow, and transform. 120 | * Returns true if the draw was handled (useful for overriding functionality). 121 | * NOTE: This method is mainly for internal use, though it may be useful for advanced uses. 122 | * @method draw 123 | * @param {CanvasRenderingContext2D} ctx The canvas 2D context object to draw into. 124 | * @param {Boolean} ignoreCache Indicates whether the draw operation should ignore any current cache. 125 | * For example, used for drawing the cache (to prevent it from simply drawing an existing cache back 126 | * into itself). 127 | **/ 128 | p.draw = function(ctx, ignoreCache) { 129 | if (this.DisplayObject_draw(ctx, ignoreCache)) { return true; } 130 | var pad = this.pad/(Math.PI*this.radius*2)*Math.PI*2; 131 | var s=this._slices, l=s.length; 132 | var r = -s[0]; 133 | for (var i=0; i 2 | 3 | 4 | EaselJS Kaleidoscope Demo 5 | 14 | 15 | 16 | 17 |
18 | Nebula image by NASA. 19 | 20 | 21 | 22 | 65 | 66 | -------------------------------------------------------------------------------- /Kaleidoscope/imgs/pic.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CreateJS/sandbox/bfcfb5afaaed512c983159285a582dd8c0bbb6ab/Kaleidoscope/imgs/pic.jpg -------------------------------------------------------------------------------- /LineGraph/README.md: -------------------------------------------------------------------------------- 1 | LineGraph 2 | ======= 3 | 4 | A very simple line graph example. 5 | 6 | ![ScreenShot](https://raw.github.com/CreateJS/sandbox/master/LineGraph/README_1.jpg) 7 | 8 | **[View this example online.](http://sandbox.createjs.com/LineGraph/demo.html)** 9 | 10 | Of note, there is no direct use of the "tick" event in this demo. The stage.update() is coupled to a tween's "change" event instead, which means rendering only happens when the animation is active (saving CPU/GPU). -------------------------------------------------------------------------------- /LineGraph/README_1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CreateJS/sandbox/bfcfb5afaaed512c983159285a582dd8c0bbb6ab/LineGraph/README_1.jpg -------------------------------------------------------------------------------- /LineGraph/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Line Graph 5 | 6 | 7 | 8 | Line graph using CreateJS. 9 | 10 | 11 | 12 | 118 | 119 | -------------------------------------------------------------------------------- /PlanetaryGary/Flash/PlanetaryGary_art.fla: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CreateJS/sandbox/bfcfb5afaaed512c983159285a582dd8c0bbb6ab/PlanetaryGary/Flash/PlanetaryGary_art.fla -------------------------------------------------------------------------------- /PlanetaryGary/Flash/PlanetaryGary_art_OLD.fla: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CreateJS/sandbox/bfcfb5afaaed512c983159285a582dd8c0bbb6ab/PlanetaryGary/Flash/PlanetaryGary_art_OLD.fla -------------------------------------------------------------------------------- /PlanetaryGary/Flash/README.md: -------------------------------------------------------------------------------- 1 | Use Flash Professional CC to open and export the PlanetaryGary\_art.fla file as a CreateJS asset library. For Flash Professional CS6 use the Flash Professional Toolkit for CreateJS to export the PlanetaryGary\_art_OLD.fla file instead. 2 | 3 | http://www.adobe.com/products/flash/flash-to-html5.html 4 | 5 | Note that Flash CC 13.1 has an issue with calculating bounds for frames in tweens. Because these bounds are used for defining the sprite sheet frame rects, you will notice some sprite sheet frames in the game will be improperly cropped if you re-export the animations. The included assets/PlanetaryGary\_art.js file has had the frameBounds values for EnemyBeaver and EnemyMoose fixed to avoid this, and we are hopeful Adobe will release a proper fix shortly. 6 | 7 | All art & graphics is copyright 2013 gskinner.com, inc. and cannot be used without permission. -------------------------------------------------------------------------------- /PlanetaryGary/README.md: -------------------------------------------------------------------------------- 1 | Planetary Gary 2 | ======= 3 | 4 | Full featured CreateJS game example. 5 | ![ScreenShot](https://raw.github.com/CreateJS/sandbox/master/PlanetaryGary/README_1.jpg) 6 | 7 | **[View this example online.](http://sandbox.createjs.com/PlanetaryGary/)** 8 | 9 | Important notes: 10 | - due to security restrictions on local content, you must run this example from a web server. 11 | - iOS Safari has a major bug which currently results in very poor performance. Apple has been made aware of this issue, and I am attempting to isolate it. 12 | 13 | 14 | Demonstrates a variety of advanced concepts including: 15 | - preloading with progress UI & multiple parallel loads 16 | - using an external manifest to load sounds 17 | - managing assets as they load 18 | - ex1. music plays as soon as it finishes loading 19 | - ex2. sprite sheet builder runs as soon as all dependencies are loaded 20 | - asynchronous run-time sprite sheet generation 21 | - all art is loaded as vector which allows scaling and keeps file size low 22 | - to show scaling, load the game with a "scale" querystring param: 23 | /index.html?scale=0.3 24 | - over-the-wire (gzipped) art size is only ~85kb vs ~3MB for sprite sheets 25 | - sprite sheet is generated while other assets load 26 | - dynamic sound effects (reverb effect when clicking Start Game) 27 | - SpriteStage and SpriteContainer using WebGL for game rendering 28 | - state changes 29 | - DOMElement for the score board 30 | - tweening music volume 31 | 32 | All art & graphics is copyright 2013 gskinner.com, inc. and cannot be used without permission. 33 | 34 | I will likely write up more information on how different parts of this example works when time permits. Keep an eye on this repo, and the CreateJS blog for updates (blog.createjs.com). 35 | -------------------------------------------------------------------------------- /PlanetaryGary/README_1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CreateJS/sandbox/bfcfb5afaaed512c983159285a582dd8c0bbb6ab/PlanetaryGary/README_1.jpg -------------------------------------------------------------------------------- /PlanetaryGary/assets/images/bg-stars.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CreateJS/sandbox/bfcfb5afaaed512c983159285a582dd8c0bbb6ab/PlanetaryGary/assets/images/bg-stars.png -------------------------------------------------------------------------------- /PlanetaryGary/assets/images/frame.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CreateJS/sandbox/bfcfb5afaaed512c983159285a582dd8c0bbb6ab/PlanetaryGary/assets/images/frame.png -------------------------------------------------------------------------------- /PlanetaryGary/assets/images/planet-one.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CreateJS/sandbox/bfcfb5afaaed512c983159285a582dd8c0bbb6ab/PlanetaryGary/assets/images/planet-one.png -------------------------------------------------------------------------------- /PlanetaryGary/assets/images/planet-two.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CreateJS/sandbox/bfcfb5afaaed512c983159285a582dd8c0bbb6ab/PlanetaryGary/assets/images/planet-two.png -------------------------------------------------------------------------------- /PlanetaryGary/assets/sounds/BodySlam.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CreateJS/sandbox/bfcfb5afaaed512c983159285a582dd8c0bbb6ab/PlanetaryGary/assets/sounds/BodySlam.mp3 -------------------------------------------------------------------------------- /PlanetaryGary/assets/sounds/BodySlam.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CreateJS/sandbox/bfcfb5afaaed512c983159285a582dd8c0bbb6ab/PlanetaryGary/assets/sounds/BodySlam.ogg -------------------------------------------------------------------------------- /PlanetaryGary/assets/sounds/DirtSlide.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CreateJS/sandbox/bfcfb5afaaed512c983159285a582dd8c0bbb6ab/PlanetaryGary/assets/sounds/DirtSlide.mp3 -------------------------------------------------------------------------------- /PlanetaryGary/assets/sounds/DirtSlide.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CreateJS/sandbox/bfcfb5afaaed512c983159285a582dd8c0bbb6ab/PlanetaryGary/assets/sounds/DirtSlide.ogg -------------------------------------------------------------------------------- /PlanetaryGary/assets/sounds/EnemyHit.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CreateJS/sandbox/bfcfb5afaaed512c983159285a582dd8c0bbb6ab/PlanetaryGary/assets/sounds/EnemyHit.mp3 -------------------------------------------------------------------------------- /PlanetaryGary/assets/sounds/EnemyHit.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CreateJS/sandbox/bfcfb5afaaed512c983159285a582dd8c0bbb6ab/PlanetaryGary/assets/sounds/EnemyHit.ogg -------------------------------------------------------------------------------- /PlanetaryGary/assets/sounds/HitHard4.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CreateJS/sandbox/bfcfb5afaaed512c983159285a582dd8c0bbb6ab/PlanetaryGary/assets/sounds/HitHard4.mp3 -------------------------------------------------------------------------------- /PlanetaryGary/assets/sounds/HitHard4.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CreateJS/sandbox/bfcfb5afaaed512c983159285a582dd8c0bbb6ab/PlanetaryGary/assets/sounds/HitHard4.ogg -------------------------------------------------------------------------------- /PlanetaryGary/assets/sounds/LaserGunShot.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CreateJS/sandbox/bfcfb5afaaed512c983159285a582dd8c0bbb6ab/PlanetaryGary/assets/sounds/LaserGunShot.mp3 -------------------------------------------------------------------------------- /PlanetaryGary/assets/sounds/LaserGunShot.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CreateJS/sandbox/bfcfb5afaaed512c983159285a582dd8c0bbb6ab/PlanetaryGary/assets/sounds/LaserGunShot.ogg -------------------------------------------------------------------------------- /PlanetaryGary/assets/sounds/PressPlay.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CreateJS/sandbox/bfcfb5afaaed512c983159285a582dd8c0bbb6ab/PlanetaryGary/assets/sounds/PressPlay.mp3 -------------------------------------------------------------------------------- /PlanetaryGary/assets/sounds/PressPlay.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CreateJS/sandbox/bfcfb5afaaed512c983159285a582dd8c0bbb6ab/PlanetaryGary/assets/sounds/PressPlay.ogg -------------------------------------------------------------------------------- /PlanetaryGary/assets/sounds/TunnelCollision.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CreateJS/sandbox/bfcfb5afaaed512c983159285a582dd8c0bbb6ab/PlanetaryGary/assets/sounds/TunnelCollision.mp3 -------------------------------------------------------------------------------- /PlanetaryGary/assets/sounds/TunnelCollision.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CreateJS/sandbox/bfcfb5afaaed512c983159285a582dd8c0bbb6ab/PlanetaryGary/assets/sounds/TunnelCollision.ogg -------------------------------------------------------------------------------- /PlanetaryGary/assets/sounds/garywalk_chill.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CreateJS/sandbox/bfcfb5afaaed512c983159285a582dd8c0bbb6ab/PlanetaryGary/assets/sounds/garywalk_chill.mp3 -------------------------------------------------------------------------------- /PlanetaryGary/assets/sounds/garywalk_chill.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CreateJS/sandbox/bfcfb5afaaed512c983159285a582dd8c0bbb6ab/PlanetaryGary/assets/sounds/garywalk_chill.ogg -------------------------------------------------------------------------------- /PlanetaryGary/assets/sounds/jump4.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CreateJS/sandbox/bfcfb5afaaed512c983159285a582dd8c0bbb6ab/PlanetaryGary/assets/sounds/jump4.mp3 -------------------------------------------------------------------------------- /PlanetaryGary/assets/sounds/jump4.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CreateJS/sandbox/bfcfb5afaaed512c983159285a582dd8c0bbb6ab/PlanetaryGary/assets/sounds/jump4.ogg -------------------------------------------------------------------------------- /PlanetaryGary/assets/styles.css: -------------------------------------------------------------------------------- 1 | /* normalize.css v2.0.1 | MIT License | git.io/normalize */ 2 | /* ========================================================================== 3 | HTML5 display definitions 4 | ========================================================================== */ 5 | /** 6 | * Correct `block` display not defined in IE 8/9. 7 | */ 8 | article, 9 | aside, 10 | details, 11 | figcaption, 12 | figure, 13 | footer, 14 | header, 15 | hgroup, 16 | nav, 17 | section, 18 | summary { 19 | display: block; 20 | } 21 | 22 | /** 23 | * Correct `inline-block` display not defined in IE 8/9. 24 | */ 25 | audio, 26 | canvas, 27 | video { 28 | display: inline-block; 29 | } 30 | 31 | /** 32 | * Prevent modern browsers from displaying `audio` without controls. 33 | * Remove excess height in iOS 5 devices. 34 | */ 35 | audio:not([controls]) { 36 | display: none; 37 | height: 0; 38 | } 39 | 40 | /** 41 | * Address styling not present in IE 8/9. 42 | */ 43 | [hidden] { 44 | display: none; 45 | } 46 | 47 | /* ========================================================================== 48 | Base 49 | ========================================================================== */ 50 | /** 51 | * 1. Set default font family to sans-serif. 52 | * 2. Prevent iOS text size adjust after orientation change, without disabling 53 | * user zoom. 54 | */ 55 | html { 56 | font-family: sans-serif; 57 | /* 1 */ 58 | -webkit-text-size-adjust: 100%; 59 | /* 2 */ 60 | -ms-text-size-adjust: 100%; 61 | /* 2 */ 62 | } 63 | 64 | /** 65 | * Remove default margin. 66 | */ 67 | body { 68 | margin: 0; 69 | } 70 | 71 | /* ========================================================================== 72 | Links 73 | ========================================================================== */ 74 | /** 75 | * Address `outline` inconsistency between Chrome and other browsers. 76 | */ 77 | a:focus { 78 | outline: thin dotted; 79 | } 80 | 81 | /** 82 | * Improve readability when focused and also mouse hovered in all browsers. 83 | */ 84 | a:active, 85 | a:hover { 86 | outline: 0; 87 | } 88 | 89 | /* ========================================================================== 90 | Typography 91 | ========================================================================== */ 92 | /** 93 | * Address variable `h1` font size within `section` and `article` contexts in 94 | * Firefox 4+, Safari 5, and Chrome. 95 | */ 96 | h1 { 97 | font-size: 2em; 98 | } 99 | 100 | /** 101 | * Address styling not present in IE 8/9, Safari 5, and Chrome. 102 | */ 103 | abbr[title] { 104 | border-bottom: 1px dotted; 105 | } 106 | 107 | /** 108 | * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. 109 | */ 110 | b, 111 | strong { 112 | font-weight: bold; 113 | } 114 | 115 | /** 116 | * Address styling not present in Safari 5 and Chrome. 117 | */ 118 | dfn { 119 | font-style: italic; 120 | } 121 | 122 | /** 123 | * Address styling not present in IE 8/9. 124 | */ 125 | mark { 126 | background: #ff0; 127 | color: #000; 128 | } 129 | 130 | /** 131 | * Correct font family set oddly in Safari 5 and Chrome. 132 | */ 133 | code, 134 | kbd, 135 | pre, 136 | samp { 137 | font-family: monospace, serif; 138 | font-size: 1em; 139 | } 140 | 141 | /** 142 | * Improve readability of pre-formatted text in all browsers. 143 | */ 144 | pre { 145 | white-space: pre; 146 | white-space: pre-wrap; 147 | word-wrap: break-word; 148 | } 149 | 150 | /** 151 | * Set consistent quote types. 152 | */ 153 | q { 154 | quotes: "\201C" "\201D" "\2018" "\2019"; 155 | } 156 | 157 | /** 158 | * Address inconsistent and variable font size in all browsers. 159 | */ 160 | small { 161 | font-size: 80%; 162 | } 163 | 164 | /** 165 | * Prevent `sub` and `sup` affecting `line-height` in all browsers. 166 | */ 167 | sub, 168 | sup { 169 | font-size: 75%; 170 | line-height: 0; 171 | position: relative; 172 | vertical-align: baseline; 173 | } 174 | 175 | sup { 176 | top: -0.5em; 177 | } 178 | 179 | sub { 180 | bottom: -0.25em; 181 | } 182 | 183 | /* ========================================================================== 184 | Embedded content 185 | ========================================================================== */ 186 | /** 187 | * Remove border when inside `a` element in IE 8/9. 188 | */ 189 | img { 190 | border: 0; 191 | } 192 | 193 | /** 194 | * Correct overflow displayed oddly in IE 9. 195 | */ 196 | svg:not(:root) { 197 | overflow: hidden; 198 | } 199 | 200 | /* ========================================================================== 201 | Figures 202 | ========================================================================== */ 203 | /** 204 | * Address margin not present in IE 8/9 and Safari 5. 205 | */ 206 | figure { 207 | margin: 0; 208 | } 209 | 210 | /* ========================================================================== 211 | Forms 212 | ========================================================================== */ 213 | /** 214 | * Define consistent border, margin, and padding. 215 | */ 216 | fieldset { 217 | border: 1px solid #c0c0c0; 218 | margin: 0 2px; 219 | padding: 0.35em 0.625em 0.75em; 220 | } 221 | 222 | /** 223 | * 1. Correct `color` not being inherited in IE 8/9. 224 | * 2. Remove padding so people aren't caught out if they zero out fieldsets. 225 | */ 226 | legend { 227 | border: 0; 228 | /* 1 */ 229 | padding: 0; 230 | /* 2 */ 231 | } 232 | 233 | /** 234 | * 1. Correct font family not being inherited in all browsers. 235 | * 2. Correct font size not being inherited in all browsers. 236 | * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. 237 | */ 238 | button, 239 | input, 240 | select, 241 | textarea { 242 | font-family: inherit; 243 | /* 1 */ 244 | font-size: 100%; 245 | /* 2 */ 246 | margin: 0; 247 | /* 3 */ 248 | } 249 | 250 | /** 251 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in 252 | * the UA stylesheet. 253 | */ 254 | button, 255 | input { 256 | line-height: normal; 257 | } 258 | 259 | /** 260 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 261 | * and `video` controls. 262 | * 2. Correct inability to style clickable `input` types in iOS. 263 | * 3. Improve usability and consistency of cursor style between image-type 264 | * `input` and others. 265 | */ 266 | button, 267 | html input[type="button"], 268 | input[type="reset"], 269 | input[type="submit"] { 270 | -webkit-appearance: button; 271 | /* 2 */ 272 | cursor: pointer; 273 | /* 3 */ 274 | } 275 | 276 | /** 277 | * Re-set default cursor for disabled elements. 278 | */ 279 | button[disabled], 280 | html input[disabled] { 281 | cursor: default; 282 | } 283 | 284 | /** 285 | * 1. Address box sizing set to `content-box` in IE 8/9. 286 | * 2. Remove excess padding in IE 8/9. 287 | */ 288 | input[type="checkbox"], 289 | input[type="radio"] { 290 | box-sizing: border-box; 291 | /* 1 */ 292 | padding: 0; 293 | /* 2 */ 294 | } 295 | 296 | /** 297 | * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. 298 | * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome 299 | * (include `-moz` to future-proof). 300 | */ 301 | input[type="search"] { 302 | -webkit-appearance: textfield; 303 | /* 1 */ 304 | -moz-box-sizing: content-box; 305 | -webkit-box-sizing: content-box; 306 | /* 2 */ 307 | box-sizing: content-box; 308 | } 309 | 310 | /** 311 | * Remove inner padding and search cancel button in Safari 5 and Chrome 312 | * on OS X. 313 | */ 314 | input[type="search"]::-webkit-search-cancel-button, 315 | input[type="search"]::-webkit-search-decoration { 316 | -webkit-appearance: none; 317 | } 318 | 319 | /** 320 | * Remove inner padding and border in Firefox 4+. 321 | */ 322 | button::-moz-focus-inner, 323 | input::-moz-focus-inner { 324 | border: 0; 325 | padding: 0; 326 | } 327 | 328 | /** 329 | * 1. Remove default vertical scrollbar in IE 8/9. 330 | * 2. Improve readability and alignment in all browsers. 331 | */ 332 | textarea { 333 | overflow: auto; 334 | /* 1 */ 335 | vertical-align: top; 336 | /* 2 */ 337 | } 338 | 339 | /* ========================================================================== 340 | Tables 341 | ========================================================================== */ 342 | /** 343 | * Remove most spacing between table cells. 344 | */ 345 | table { 346 | border-collapse: collapse; 347 | border-spacing: 0; 348 | } 349 | 350 | html, body { 351 | height: 100%; 352 | width: 100%; 353 | position: relative; 354 | } 355 | 356 | body { 357 | background: url(images/frame.png) no-repeat center center, url(images/planet-one.png) no-repeat left bottom, url(images/planet-two.png) no-repeat right bottom, url(images/bg-stars.png) repeat top left; 358 | } 359 | 360 | canvas { 361 | position:absolute; 362 | background: -webkit-linear-gradient(top,#C1F0C7 0%,#F0F9D1 75%,rgba(245,83,81,1) 75%); 363 | } 364 | 365 | #gameFrame { 366 | position: fixed; 367 | width:800px; 368 | height:600px; 369 | top: 50%; 370 | left: 50%; 371 | margin-top: -300px; 372 | margin-left: -400px; 373 | overflow:hidden; 374 | } 375 | 376 | #gameStats { 377 | position: absolute; 378 | background:#555; 379 | padding:5px; 380 | border:6px solid #666; 381 | font-family: Arial, sans-serif; 382 | font-size: 14px; 383 | color: #FE0; 384 | border-radius: 8px; 385 | visibility: hidden; 386 | box-shadow: 3px 3px 0px rgba(0,0,0,0.2); 387 | } 388 | 389 | #gameStats h1 { 390 | color:#000; 391 | font-size: 120%; 392 | text-align: center; 393 | margin: 5px; 394 | } 395 | 396 | #gameStats td { 397 | padding:0.2em; 398 | text-align: right; 399 | } 400 | 401 | #gameStats .label { 402 | color: #DB0; 403 | padding-right: 1em; 404 | font-weight: bold; 405 | text-align:left; 406 | } 407 | 408 | #gameStats .score { 409 | border-top: 1px solid #666; 410 | } 411 | -------------------------------------------------------------------------------- /PlanetaryGary/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Planetary Gary 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | alternate content 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 |
Distance Run:0
Creatures Shot:0
Hazards Dodged:0
Total Score:0
25 |
26 |
27 | 28 | 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /PlanetaryGary/js/Game.js: -------------------------------------------------------------------------------- 1 | // NOTE: comments focus mainly on CreateJS logic, not game mechanics. 2 | 3 | (function() { 4 | var c = createjs; 5 | 6 | var Game = function(view, width, height, scale) { 7 | this.view = view; // the SpriteStage instance to draw into 8 | this.view.mouseChildren = false; // nothing in the game view requires mouse interaction 9 | this.width = width; 10 | var h = this.height = height; 11 | var s = this.scale = scale; 12 | var b = 170*s; 13 | 14 | // define the different layers of terrain, and the sprite labels that can be displayed on them: 15 | this.terrain = [ 16 | {speed:1, minX:50, maxX:400, minY:0, maxY:h-350*s, bounce:false, labels:["cloud0","cloud1","cloud2"]}, 17 | {speed:2, minX:100, maxX:1000, minY:h-300*s, maxY:h-250*s, bounce:true, labels:["building0","building1","building2"]}, 18 | {speed:3, minX:809-2, maxX:809-2, minY:h-168*s, maxY:h-168*s, bounce:false, labels:["bgMid0","bgMid1","bgMid2"]}, 19 | {speed:3, minX:100, maxX:500, minY:h-290*s, maxY:h-200*s, bounce:true, labels:["midDeco0","midDeco1","midDeco2","midDeco3"]}, 20 | {speed:4, minX:100, maxX:800, minY:h-120*s, maxY:h, bounce:false, labels:["frontDeco0","frontDeco1"]}, 21 | {speed:4, minX:800, maxX:1800, minY:h-30*s, maxY:h-30*s, bounce:false, type:1, x:2000, labels:["trap0", "trap1", "trap2", "enemy0Idle", "enemy1Idle"]}, 22 | ]; 23 | 24 | this.spriteSheet = null; 25 | this.sprites = []; 26 | this.speed = 0; 27 | this.terrainContainers = []; 28 | this.shot = null; 29 | this.hero = null; 30 | this.spritePool = []; 31 | this.dead = false; 32 | this.keyListener = null; 33 | this.tickListener = null; 34 | this.shotDelay = null; 35 | this.stats = null; 36 | this.kills = null; 37 | this.distance = null; 38 | this.hazards = null; 39 | this.score = 0; 40 | 41 | this._inited = false; 42 | } 43 | 44 | var p = c.extend(Game, c.EventDispatcher); 45 | 46 | 47 | p.init = function(spriteSheet) { 48 | var i,l, s = this.scale; 49 | 50 | // the first time a game starts, we need to set up a few things: 51 | if (!this._inited) { 52 | this._inited = true; 53 | 54 | var bg = new c.Shape(); 55 | bg.graphics 56 | .beginLinearGradientFill(["#C1F0C7", "#F0F9D1"], [0,1], 0,0, 0,this.height-170*s) 57 | .drawRect(0,0,this.width,this.height-170*s) 58 | .beginFill("#f55351").drawRect(0,this.height-170*s,this.width,170*s); 59 | bg.cache(0,0,this.width,this.height); 60 | this.view.addChild(new c.Bitmap(bg.cacheCanvas)); 61 | 62 | var terrain = this.terrain; 63 | for (i=0,l=terrain.length; i this.width-this.shot.getBounds().x) { 137 | // left the screen. 138 | this.shot.stop(); 139 | this.shot.visible = false; 140 | } 141 | } 142 | 143 | p.updateTerrain = function(enemies, t) { 144 | var i,l; 145 | // move existing terrain elements: 146 | var speed = this.scale*this.speed*(t||1); 147 | for (i=this.sprites.length-1; i>=0; i--) { 148 | var sprite = this.sprites[i]; 149 | if (sprite.type == 0) { continue; } 150 | sprite.x -= speed*sprite.speed; 151 | var bounds = sprite.getBounds(); 152 | if (!this.dead && sprite.x < bounds.x-bounds.width) { this.reclaimSprite(sprite, i); } 153 | else if (sprite.type) { this.processSprite(sprite); } 154 | } 155 | 156 | // generate new terrain: 157 | var terrain = this.terrain; 158 | for (i=0,l=terrain.length; i 0) { continue; } 163 | var label = o.labels[Math.random()*o.labels.length|0]; 164 | var sprite = this.getSprite(label, o.speed, o.bounce, i, o.type); 165 | sprite.y = o.minY+Math.random()*(o.maxY-o.minY)|0; 166 | sprite.x = this.width-sprite.getBounds().x+o.x; 167 | if (o.type != null) { this.initSprite(sprite, label); } 168 | var range = (o.maxX-o.minX) * (o.type ? this.speed/12 : 1); 169 | o.x += this.scale*(o.minX+Math.random()*range); 170 | } 171 | } 172 | 173 | p.processSprite = function(sprite) { 174 | // checks for interactions between sprites. 175 | if (!sprite.trap && this.shot.visible && !sprite.dead && Math.abs(this.shot.x-sprite.x) < 50*this.scale) { 176 | // in a more robust game, we'd likely build a simple label matrix instead 177 | // of using "hacky" string approaches to assemble the label (ex "enemy0Death") 178 | sprite.gotoAndPlay(sprite.currentAnimation.substr(0,6)+"Death"); 179 | sprite.dead = true; 180 | this.shot.visible = false; 181 | c.Sound.play("EnemyHit"); 182 | this.kills++; 183 | } else if (!this.dead && sprite.trap && Math.abs(this.hero.x-sprite.x) < 80*this.scale) { 184 | if (sprite.tunnel && this.hero.currentAnimation != "slide") { 185 | this.die("tunneldeath"); 186 | c.Sound.play("TunnelCollision"); 187 | } else if (!sprite.tunnel && this.hero.currentAnimation != "jump") { 188 | this.die("death"); 189 | c.Sound.play("HitHard4"); 190 | } 191 | } else if (!this.dead && !sprite.jumped && sprite.x < this.hero.x-80*this.scale) { 192 | this.hazards++; 193 | sprite.jumped = true; 194 | } 195 | } 196 | 197 | p.initSprite = function(sprite, label) { 198 | // this uses some fairly specific logic, which could be made more generic for a 199 | // more robust game, but works for this demo: 200 | sprite.trap = (label.charAt(0) == "t"); 201 | if (sprite.tunnel = (label == "trap2")) { 202 | var front = this.getSprite("trap2f", sprite.speed, sprite.bounce); 203 | this.view.addChild(front).set({x:sprite.x, y:sprite.y}); 204 | } 205 | sprite.dead = sprite.jumped = false; 206 | if (!sprite.trap) { sprite.y -= 80*this.scale; } 207 | } 208 | 209 | p.getSprite = function(label, speed, bounce, containerIndex, type) { 210 | // returns a sprite, either from an object pool or instantiating a new one 211 | var sprite = this.spritePool.length ? this.spritePool.pop() : new c.Sprite(this.spriteSheet); 212 | sprite.set({speed:speed, type:type, dead:false}); 213 | sprite.gotoAndPlay(label); 214 | if (bounce) { c.Tween.get(sprite, {loop:true}).to({scaleY:0.9}, 400).to({scaleY:1}, 400); } 215 | if (containerIndex != null) { this.terrainContainers[containerIndex].addChild(sprite); } 216 | this.sprites.push(sprite); 217 | return sprite; 218 | } 219 | 220 | p.reclaimSprite = function(sprite, index) { 221 | // deactivates the sprite, and returns it to the object pool for future reuse. 222 | c.Tween.removeTweens(sprite); 223 | sprite.stop(); 224 | sprite.scaleY = 1; 225 | if (sprite.parent) { sprite.parent.removeChild(sprite); } 226 | if (index == null) { index = this.sprites.indexOf(sprite); } 227 | if (index != -1) { this.sprites.splice(index, 1); } 228 | this.spritePool.push(sprite); 229 | } 230 | 231 | p.die = function(label) { 232 | this.hero.gotoAndPlay(label); 233 | this.hero.type = null; 234 | this.dead = true; 235 | window.document.removeEventListener("keydown", this.keyListener); 236 | var tween = c.Tween.get(this, {override:true}) 237 | .to({speed:-this.speed*0.5}, 3000, c.Ease.get(-0.6)) 238 | .to({speed:0},4000, c.Ease.get(-0.5)).wait(1000) 239 | .call(this.endGame, [], this); 240 | 241 | var h = this.stats.htmlElement.offsetHeight; 242 | c.Tween.get(this.stats) 243 | .to({y:this.hero.y-h-100*this.scale}, 2500, c.Ease.bounceOut) 244 | .wait(4500).to({alpha:0},1000) 245 | .on("change", this.alignStats, this); 246 | } 247 | 248 | p.alignStats = function(evt) { 249 | this.stats.x += (this.hero.x+250*this.scale-this.stats.x)*0.4; 250 | } 251 | 252 | p.updateStats = function() { 253 | // update the gameStats div. 254 | killsFld.innerText = String(this.kills); 255 | distanceFld.innerText = String(Math.round(this.distance/10)); 256 | hazardsFld.innerText = String(this.hazards); 257 | scoreFld.innerText = String(this.kills*100+this.hazards*10000+Math.round(this.distance/10)*100); 258 | } 259 | 260 | p.endGame = function() { 261 | // clean up listeners, and remove sprites: 262 | this.view.off("tick", this.tickListener); 263 | while (this.sprites.length) { 264 | this.reclaimSprite(this.sprites.pop()); 265 | } 266 | 267 | // let GameInit know we are done (all DisplayObjects are event dispatchers): 268 | this.dispatchEvent("end"); 269 | } 270 | 271 | window.Game = createjs.promote(Game, "EventDispatcher"); 272 | })(); -------------------------------------------------------------------------------- /PlanetaryGary/js/GameInit.js: -------------------------------------------------------------------------------- 1 | // simple block of code to grab the query string params: 2 | var urlParams = {}; 3 | (function () { 4 | var match, 5 | pl = /\+/g, // Regex for replacing addition symbol with a space 6 | search = /([^&=]+)=?([^&]*)/g, 7 | decode = function (s) { return decodeURIComponent(s.replace(pl, " ")); }, 8 | query = window.location.search.substring(1); 9 | 10 | while (match = search.exec(query)) { 11 | urlParams[decode(match[1])] = decode(match[2]); 12 | } 13 | })(); 14 | 15 | // our game init logic: 16 | (function() { 17 | 18 | var c = createjs; 19 | var currentStage, gameStage, uiStage = new c.Stage("uiCanvas"); 20 | var canvasW = uiStage.canvas.width; 21 | var canvasH = uiStage.canvas.height; 22 | var scale = urlParams.scale?Math.min(0.7, Math.max(0.3, Number(urlParams.scale))):0.7; 23 | var debug = urlParams.debug !== undefined; 24 | var queue, progress, progressBmp, menu, game, gameView, currentView; 25 | var spriteSheet, fps, builder, currentStageListener, delayNode, music; 26 | 27 | function init() { 28 | currentStage = uiStage; 29 | progress = currentView = uiStage.addChild(new c.Shape()); 30 | progress.x = canvasW/2; 31 | progress.y = canvasH*0.75; 32 | initProgressBmp(); 33 | 34 | c.Sound.registerPlugins([c.WebAudioPlugin, c.HTMLAudioPlugin]); 35 | c.Sound.alternateExtensions = ["mp3", "ogg"]; 36 | 37 | c.Sound.defaultInterruptBehaviour = c.Sound.INTERRUPT_LATE; 38 | 39 | // set up the load queue, and listen for its events: 40 | queue = new c.LoadQueue(); 41 | queue.installPlugin(c.Sound); 42 | queue.on("progress", handleProgress, this); 43 | queue.on("fileload", handleFileLoad, this); 44 | queue.on("complete", handleLoadComplete, this, true); 45 | 46 | // let it handle multiple loads concurrently: 47 | queue.setMaxConnections(8); 48 | 49 | // load our assets, starting with everything we need to render the spritesheet: 50 | queue.loadManifest([ 51 | {src:"assets/PlanetaryGary_art.js", id: "art"}, 52 | {src:"libs/webgl-NEXT.combined.js"}, 53 | {src:"js/Game.js"}, 54 | 55 | {src:"sounds.json", type:c.LoadQueue.MANIFEST} 56 | ], true); 57 | } 58 | 59 | function handleFileLoad(evt) { 60 | var o = evt.item; 61 | if (o.id == "music" && o.type == c.LoadQueue.SOUND) { 62 | // start the music playing as soon as it's loaded (no need to wait): 63 | music = c.Sound.play("music", {loop:-1}); 64 | setMusicVolume(1, 10000); 65 | setupMusicFX(music); 66 | } else if (o.id == "art") { 67 | // we now have everything we need to start building the spritesheet, 68 | // so we'll kick it off to run in parallel: 69 | fps = lib.properties.fps; 70 | generateSpriteSheet(); 71 | } 72 | } 73 | 74 | function setupMusicFX(soundInstance) { 75 | if (!soundInstance.gainNode) { return; } 76 | delayNode = c.Sound.activePlugin.context.createDelay(); 77 | delayNode.connect(c.Sound.activePlugin.dynamicsCompressorNode); 78 | delayNode.delayTime.value = 0; 79 | soundInstance.gainNode.connect(delayNode); 80 | } 81 | 82 | function playSoundFX() { 83 | if (!delayNode) { return; } 84 | createjs.Tween.get(delayNode.delayTime, {override:true}) 85 | .to({value:1}).to({value:0}, 2200, createjs.Ease.bounceInOut); 86 | } 87 | 88 | function handleProgress(evt) { 89 | drawProgress(evt.loaded/evt.total); 90 | uiStage.update(evt); 91 | } 92 | 93 | function drawProgress(value) { 94 | progress.graphics.clear() 95 | .beginFill("#EB2").drawRoundRect(-103,-13,206,26,13) 96 | .beginBitmapFill(progressBmp).drawRoundRect(-100,-10,value*200|0,20,10); 97 | } 98 | 99 | function handleLoadComplete() { 100 | queue = null; 101 | 102 | // if the SpriteSheetBuilder isn't done, we'll reduce its timeslice to 10% keep 103 | // the menu running smoothly: 104 | if (builder) { builder.timeSlice = 0.1; } 105 | 106 | // instantiate the menu view from the library (published from Flash), 107 | // and get it set up correctly: 108 | menu = uiStage.addChild(new lib.Menu()); 109 | menu.stop(); 110 | menu.startBtn.on("click", startClicked, this); 111 | 112 | // this is dispatched from the timeline of the menu view when it hits the end of 113 | // the start game animation: 114 | menu.on("start", function() { 115 | menu.stop(); 116 | startGame(); 117 | }); 118 | 119 | // swap out the progress view for the menu view: 120 | swapView(menu); 121 | 122 | // set up the game view: 123 | gameStage = gameView = new c.SpriteStage("gameCanvas"); 124 | gameStage.snapToPixelEnabled = true; // this prevents seams on abutted background tiles. 125 | 126 | // instantiate the Game logic (defined in Game.js) 127 | window.game = game = new Game(gameView, canvasW, canvasH, scale); 128 | game.on("end", endGame, this); 129 | 130 | // set up our ticker's default FPS: 131 | c.Ticker.setFPS(fps); 132 | } 133 | 134 | function swapView(view) { 135 | // this swaps the current view with the specified view: 136 | currentView.visible = false; 137 | view.visible = true; 138 | currentView = view; 139 | 140 | // only the menu view requires mouseovers, so we disable them for other views 141 | // to save some CPU. In a more robust app, with more views, we might handle this 142 | // more generically. 143 | uiStage.enableMouseOver( view == menu ? 10 : 0 ); 144 | 145 | // tween the volume based on state: 146 | setMusicVolume(view == menu ? 1 : 0.3, 2000); 147 | 148 | // hide the UI canvas if we don't need it: 149 | uiStage.canvas.style.visibility = (view == gameView) ? "hidden" : "visible"; 150 | 151 | // update the Ticker: 152 | c.Ticker.off("tick", currentStageListener); 153 | currentStage = (view == gameView) ? gameStage : uiStage; 154 | currentStageListener = c.Ticker.on("tick", currentStage); 155 | 156 | // the game runs in RAF mode so it's silky smooth 157 | // the menu runs at its nominal framerate 158 | c.Ticker.timingMode = (view == gameView) ? c.Ticker.RAF : c.Ticker.TIMEOUT; 159 | } 160 | 161 | function initProgressBmp() { 162 | // generate the barber pole pattern that we will fill our progress bar with: 163 | var shape = new c.Shape(); 164 | shape.graphics.beginFill("#333").drawRect(0,0,20,20).beginFill("#EB2") 165 | .moveTo(0,0).lineTo(10,0).lineTo(0,10).closePath() 166 | .moveTo(0,20).lineTo(20,0).lineTo(20,10).lineTo(10,20).closePath(); 167 | shape.cache(0,0,20,20); 168 | progressBmp = shape.cacheCanvas; 169 | } 170 | 171 | function startClicked() { 172 | menu.mouseEnabled = false; 173 | menu.play(); 174 | c.Sound.play("PressPlay"); 175 | 176 | playSoundFX(); 177 | } 178 | 179 | function generateSpriteSheet() { 180 | builder = new c.SpriteSheetBuilder(); 181 | builder.on("complete", handleBuildComplete, this, true); 182 | 183 | // this sets the global scale for all the sprites. 184 | // it is multiplied against the individual scale. 185 | builder.scale = scale; 186 | 187 | // add all of the symbols we want in our spritesheet, and specify scales: 188 | builder.addMovieClip(new lib.BGBuilding, null, 0.8); 189 | builder.addMovieClip(new lib.BGCloud); 190 | builder.addMovieClip(new lib.BGFrontDeco); 191 | builder.addMovieClip(new lib.BGMid); 192 | builder.addMovieClip(new lib.BGMidDeco); 193 | builder.addMovieClip(new lib.EnemyBeaver, null, 0.65); 194 | builder.addMovieClip(new lib.EnemyMoose, null, 0.65); 195 | builder.addMovieClip(new lib.Hero, null, 0.8); 196 | builder.addMovieClip(new lib.HeroBullet); 197 | builder.addMovieClip(new lib.Trap, null, 0.8); 198 | 199 | // generate the sprite sheet asynchronously (in the background), 200 | // using 95% of available CPU: 201 | builder.buildAsync(0.95); 202 | } 203 | 204 | function handleBuildComplete() { 205 | spriteSheet = builder.spriteSheet; 206 | spriteSheet.framerate = fps; 207 | 208 | // set up "next" properties on some of the sprite sheet animations. 209 | // for example, so death does not loop, and jump continues into run. 210 | var o = {death:false, tunneldeath:false, enemy0Death:false, enemy1Death:false, jump:"run", slide:"run", shoot:"run"} 211 | for (n in o) { spriteSheet.getAnimation(n).next = o[n]; } 212 | 213 | // if the user has already hit start, then start the game: 214 | if (builder.startGame) { startGame(); } 215 | builder = null; 216 | 217 | if (debug) { 218 | for (var i=0, imgs = spriteSheet._images; iExample 50 | * 51 | * var data = { 52 | * images: ["sprites.jpg"], 53 | * frames: {width:50, height:50}, 54 | * animations: {run:[0,4], jump:[5,8,"run"]} 55 | * }; 56 | * var spriteSheet = new createjs.SpriteSheet(data); 57 | * var container = new createjs.SpriteContainer(spriteSheet); 58 | * container.addChild(spriteInstance, spriteInstance2); 59 | * container.x = 100; 60 | * 61 | * Note: SpriteContainer is not included in the minified version of EaselJS. 62 | * 63 | * @class SpriteContainer 64 | * @extends Container 65 | * @constructor 66 | * @param {SpriteSheet} [spriteSheet] The spriteSheet to use for this SpriteContainer and its children. 67 | **/ 68 | function SpriteContainer(spriteSheet) { 69 | this.Container_constructor(); 70 | 71 | 72 | // public properties: 73 | /** 74 | * The SpriteSheet that this container enforces use of. 75 | * @property spriteSheet 76 | * @type {SpriteSheet} 77 | * @readonly 78 | **/ 79 | this.spriteSheet = spriteSheet; 80 | } 81 | var p = createjs.extend(SpriteContainer, createjs.Container); 82 | 83 | /** 84 | * REMOVED. Removed in favor of using `MySuperClass_constructor`. 85 | * See {{#crossLink "Utility Methods/extend"}}{{/crossLink}} and {{#crossLink "Utility Methods/promote"}}{{/crossLink}} 86 | * for details. 87 | * 88 | * There is an inheritance tutorial distributed with EaselJS in /tutorials/Inheritance. 89 | * 90 | * @method initialize 91 | * @protected 92 | * @deprecated 93 | */ 94 | // p.initialize = function() {}; // searchable for devs wondering where it is. 95 | 96 | 97 | // public methods: 98 | /** 99 | * Adds a child to the top of the display list. 100 | * Only children of type SpriteContainer, Sprite, Bitmap, BitmapText, or DOMElement are allowed. 101 | * The child must have the same spritesheet as this container (unless it's a DOMElement). 102 | * If a spritesheet hasn't been defined, this container uses this child's spritesheet. 103 | * 104 | *

Example

105 | * container.addChild(bitmapInstance); 106 | * 107 | * You can also add multiple children at once: 108 | * 109 | * container.addChild(bitmapInstance, shapeInstance, textInstance); 110 | * 111 | * @method addChild 112 | * @param {DisplayObject} child The display object to add. 113 | * @return {DisplayObject} The child that was added, or the last child if multiple children were added. 114 | **/ 115 | p.addChild = function(child) { 116 | if (child == null) { return child; } 117 | if (arguments.length > 1) { 118 | return this.addChildAt.apply(this, Array.prototype.slice.call(arguments).concat([this.children.length])); 119 | } else { 120 | return this.addChildAt(child, this.children.length); 121 | } 122 | }; 123 | 124 | /** 125 | * Adds a child to the display list at the specified index, bumping children at equal or greater indexes up one, and 126 | * setting its parent to this Container. 127 | * Only children of type SpriteContainer, Sprite, Bitmap, BitmapText, or DOMElement are allowed. 128 | * The child must have the same spritesheet as this container (unless it's a DOMElement). 129 | * If a spritesheet hasn't been defined, this container uses this child's spritesheet. 130 | * 131 | *

Example

132 | * addChildAt(child1, index); 133 | * 134 | * You can also add multiple children, such as: 135 | * 136 | * addChildAt(child1, child2, ..., index); 137 | * 138 | * The index must be between 0 and numChildren. For example, to add myShape under otherShape in the display list, 139 | * you could use: 140 | * 141 | * container.addChildAt(myShape, container.getChildIndex(otherShape)); 142 | * 143 | * This would also bump otherShape's index up by one. Fails silently if the index is out of range. 144 | * 145 | * @method addChildAt 146 | * @param {DisplayObject} child The display object to add. 147 | * @param {Number} index The index to add the child at. 148 | * @return {DisplayObject} Returns the last child that was added, or the last child if multiple children were added. 149 | **/ 150 | p.addChildAt = function(child, index) { 151 | var l = arguments.length; 152 | var indx = arguments[l-1]; // can't use the same name as the index param or it replaces arguments[1] 153 | if (indx < 0 || indx > this.children.length) { return arguments[l-2]; } 154 | if (l > 2) { 155 | for (var i=0; i= 1) { 159 | // The child is compatible with SpriteStage/SpriteContainer. 160 | } else { 161 | console && console.log("Error: You can only add children of type SpriteContainer, Sprite, BitmapText, or DOMElement [" + child.toString() + "]"); 162 | return child; 163 | } 164 | if (child._spritestage_compatibility <= 4) { 165 | var spriteSheet = child.spriteSheet; 166 | if ((!spriteSheet || !spriteSheet._images || spriteSheet._images.length > 1) || (this.spriteSheet && this.spriteSheet !== spriteSheet)) { 167 | console && console.log("Error: A child's spriteSheet must be equal to its parent spriteSheet and only use one image. [" + child.toString() + "]"); 168 | return child; 169 | } 170 | this.spriteSheet = spriteSheet; 171 | } 172 | if (child.parent) { child.parent.removeChild(child); } 173 | child.parent = this; 174 | this.children.splice(index, 0, child); 175 | return child; 176 | }; 177 | 178 | /** 179 | * Returns a string representation of this object. 180 | * @method toString 181 | * @return {String} a string representation of the instance. 182 | **/ 183 | p.toString = function() { 184 | return "[SpriteContainer (name="+ this.name +")]"; 185 | }; 186 | 187 | 188 | createjs.SpriteContainer = createjs.promote(SpriteContainer, "Container"); 189 | }()); 190 | 191 | //############################################################################## 192 | // SpriteStage.js 193 | //############################################################################## 194 | 195 | this.createjs = this.createjs||{}; 196 | 197 | (function() { 198 | "use strict"; 199 | 200 | 201 | // Set which classes are compatible with SpriteStage. 202 | // The order is important!!! If it's changed/appended, make sure that any logic that 203 | // checks _spritestage_compatibility accounts for it! 204 | [createjs.SpriteContainer, createjs.Sprite, createjs.BitmapText, createjs.Bitmap, createjs.DOMElement].forEach(function(_class, index) { 205 | _class.prototype._spritestage_compatibility = index + 1; 206 | }); 207 | 208 | 209 | // constructor: 210 | /** 211 | * A sprite stage is the root level {{#crossLink "Container"}}{{/crossLink}} for an aggressively optimized display list. Each time its {{#crossLink "Stage/tick"}}{{/crossLink}} 212 | * method is called, it will render its display list to its target canvas. WebGL content is fully compatible with the existing Context2D renderer. 213 | * On devices or browsers that don't support WebGL, content will automatically be rendered via canvas 2D. 214 | * 215 | * Restrictions: 216 | * - only Sprite, SpriteContainer, BitmapText, Bitmap and DOMElement are allowed to be added to the display list. 217 | * - a child being added (with the exception of DOMElement) MUST have an image or spriteSheet defined on it. 218 | * - a child's image/spriteSheet MUST never change while being on the display list. 219 | * 220 | *

Example

221 | * This example creates a sprite stage, adds a child to it, then uses {{#crossLink "Ticker"}}{{/crossLink}} to update the child 222 | * and redraw the stage using {{#crossLink "SpriteStage/update"}}{{/crossLink}}. 223 | * 224 | * var stage = new createjs.SpriteStage("canvasElementId", false, false); 225 | * stage.updateViewport(800, 600); 226 | * var image = new createjs.Bitmap("imagePath.png"); 227 | * stage.addChild(image); 228 | * createjs.Ticker.addEventListener("tick", handleTick); 229 | * function handleTick(event) { 230 | * image.x += 10; 231 | * stage.update(); 232 | * } 233 | * 234 | * Note: SpriteStage is not included in the minified version of EaselJS. 235 | * 236 | * @class SpriteStage 237 | * @extends Stage 238 | * @constructor 239 | * @param {HTMLCanvasElement | String | Object} canvas A canvas object that the SpriteStage will render to, or the string id 240 | * of a canvas object in the current document. 241 | * @param {Boolean} preserveDrawingBuffer If true, the canvas is NOT auto-cleared by WebGL (spec discourages true). Useful if you want to use p.autoClear = false. 242 | * @param {Boolean} antialias Specifies whether or not the browser's WebGL implementation should try to perform antialiasing. 243 | **/ 244 | function SpriteStage(canvas, preserveDrawingBuffer, antialias) { 245 | this.Stage_constructor(canvas); 246 | 247 | 248 | // private properties: 249 | /** 250 | * Specifies whether or not the canvas is auto-cleared by WebGL. Spec discourages true. 251 | * If true, the canvas is NOT auto-cleared by WebGL. Value is ignored if `_alphaEnabled` is false. 252 | * Useful if you want to use `autoClear = false`. 253 | * @property _preserveDrawingBuffer 254 | * @protected 255 | * @type {Boolean} 256 | * @default false 257 | **/ 258 | this._preserveDrawingBuffer = preserveDrawingBuffer||false; 259 | 260 | /** 261 | * Specifies whether or not the browser's WebGL implementation should try to perform antialiasing. 262 | * @property _antialias 263 | * @protected 264 | * @type {Boolean} 265 | * @default false 266 | **/ 267 | this._antialias = antialias||false; 268 | 269 | /** 270 | * The width of the canvas element. 271 | * @property _viewportWidth 272 | * @protected 273 | * @type {Number} 274 | * @default 0 275 | **/ 276 | this._viewportWidth = 0; 277 | 278 | /** 279 | * The height of the canvas element. 280 | * @property _viewportHeight 281 | * @protected 282 | * @type {Number} 283 | * @default 0 284 | **/ 285 | this._viewportHeight = 0; 286 | 287 | /** 288 | * A 2D projection matrix used to convert WebGL's clipspace into normal pixels. 289 | * @property _projectionMatrix 290 | * @protected 291 | * @type {Float32Array} 292 | * @default null 293 | **/ 294 | this._projectionMatrix = null; 295 | 296 | /** 297 | * The current WebGL canvas context. 298 | * @property _webGLContext 299 | * @protected 300 | * @type {WebGLRenderingContext} 301 | * @default null 302 | **/ 303 | this._webGLContext = null; 304 | 305 | /** 306 | * Indicates whether or not an error has been detected when dealing with WebGL. 307 | * If the is true, the behavior should be to use Canvas 2D rendering instead. 308 | * @property _webGLErrorDetected 309 | * @protected 310 | * @type {Boolean} 311 | * @default false 312 | **/ 313 | this._webGLErrorDetected = false; 314 | 315 | /** 316 | * The color to use when the WebGL canvas has been cleared. 317 | * @property _clearColor 318 | * @protected 319 | * @type {Object} 320 | * @default null 321 | **/ 322 | this._clearColor = null; 323 | 324 | /** 325 | * The maximum number of textures WebGL can work with per draw call. 326 | * @property _maxTexturesPerDraw 327 | * @protected 328 | * @type {Number} 329 | * @default 1 330 | **/ 331 | this._maxTexturesPerDraw = 1; // TODO: this is currently unused. 332 | 333 | /** 334 | * The maximum total number of boxes points that can be defined per draw call. 335 | * @property _maxBoxesPointsPerDraw 336 | * @protected 337 | * @type {Number} 338 | * @default null 339 | **/ 340 | this._maxBoxesPointsPerDraw = null; 341 | 342 | /** 343 | * The maximum number of boxes (sprites) that can be drawn in one draw call. 344 | * @property _maxBoxesPerDraw 345 | * @protected 346 | * @type {Number} 347 | * @default null 348 | **/ 349 | this._maxBoxesPerDraw = null; 350 | 351 | /** 352 | * The maximum number of indices that can be drawn in one draw call. 353 | * @property _maxIndicesPerDraw 354 | * @protected 355 | * @type {Number} 356 | * @default null 357 | **/ 358 | this._maxIndicesPerDraw = null; 359 | 360 | /** 361 | * The shader program used to draw everything. 362 | * @property _shaderProgram 363 | * @protected 364 | * @type {WebGLProgram} 365 | * @default null 366 | **/ 367 | this._shaderProgram = null; 368 | 369 | /** 370 | * The vertices data for the current draw call. 371 | * @property _vertices 372 | * @protected 373 | * @type {Float32Array} 374 | * @default null 375 | **/ 376 | this._vertices = null; 377 | 378 | /** 379 | * The buffer that contains all the vertices data. 380 | * @property _verticesBuffer 381 | * @protected 382 | * @type {WebGLBuffer} 383 | * @default null 384 | **/ 385 | this._verticesBuffer = null; 386 | 387 | /** 388 | * The indices to the vertices defined in this._vertices. 389 | * @property _indices 390 | * @protected 391 | * @type {Uint16Array} 392 | * @default null 393 | **/ 394 | this._indices = null; 395 | 396 | /** 397 | * The buffer that contains all the indices data. 398 | * @property _indicesBuffer 399 | * @protected 400 | * @type {WebGLBuffer} 401 | * @default null 402 | **/ 403 | this._indicesBuffer = null; 404 | 405 | /** 406 | * The current box index being defined for drawing. 407 | * @property _currentBoxIndex 408 | * @protected 409 | * @type {Number} 410 | * @default -1 411 | **/ 412 | this._currentBoxIndex = -1; 413 | 414 | /** 415 | * The current texture that will be used to draw into the GPU. 416 | * @property _drawTexture 417 | * @protected 418 | * @type {WebGLTexture} 419 | * @default null 420 | **/ 421 | this._drawTexture = null; 422 | 423 | 424 | // setup: 425 | this._initializeWebGL(); 426 | } 427 | var p = createjs.extend(SpriteStage, createjs.Stage); 428 | 429 | // TODO: deprecated 430 | // p.initialize = function() {}; // searchable for devs wondering where it is. REMOVED. See docs for details. 431 | 432 | 433 | // constants: 434 | /** 435 | * The number of properties defined per vertex in p._verticesBuffer. 436 | * x, y, textureU, textureV, alpha 437 | * @property NUM_VERTEX_PROPERTIES 438 | * @static 439 | * @final 440 | * @type {Number} 441 | * @readonly 442 | **/ 443 | SpriteStage.NUM_VERTEX_PROPERTIES = 5; 444 | 445 | /** 446 | * The number of points in a box...obviously :) 447 | * @property POINTS_PER_BOX 448 | * @static 449 | * @final 450 | * @type {Number} 451 | * @readonly 452 | **/ 453 | SpriteStage.POINTS_PER_BOX = 4; 454 | 455 | /** 456 | * The number of vertex properties per box. 457 | * @property NUM_VERTEX_PROPERTIES_PER_BOX 458 | * @static 459 | * @final 460 | * @type {Number} 461 | * @readonly 462 | **/ 463 | SpriteStage.NUM_VERTEX_PROPERTIES_PER_BOX = SpriteStage.POINTS_PER_BOX * SpriteStage.NUM_VERTEX_PROPERTIES; 464 | 465 | /** 466 | * The number of indices needed to define a box using triangles. 467 | * 6 indices = 2 triangles = 1 box 468 | * @property INDICES_PER_BOX 469 | * @static 470 | * @final 471 | * @type {Number} 472 | * @readonly 473 | **/ 474 | SpriteStage.INDICES_PER_BOX = 6; 475 | 476 | /** 477 | * The maximum size WebGL allows for element index numbers: 16 bit unsigned integer 478 | * @property MAX_INDEX_SIZE 479 | * @static 480 | * @final 481 | * @type {Number} 482 | * @readonly 483 | **/ 484 | SpriteStage.MAX_INDEX_SIZE = Math.pow(2, 16); 485 | 486 | /** 487 | * The amount used to increment p._maxBoxesPointsPerDraw when the maximum has been reached. 488 | * If the maximum size of element index WebGL allows for (SpriteStage.MAX_INDEX_SIZE) was used, 489 | * the array size for p._vertices would equal 1280kb and p._indices 192kb. But since mobile phones 490 | * with less memory need to be accounted for, the maximum size is somewhat arbitrarily divided by 4, 491 | * reducing the array sizes to 320kb and 48kb respectively. 492 | * @property MAX_BOXES_POINTS_INCREMENT 493 | * @static 494 | * @final 495 | * @type {Number} 496 | * @readonly 497 | **/ 498 | SpriteStage.MAX_BOXES_POINTS_INCREMENT = SpriteStage.MAX_INDEX_SIZE / 4; 499 | 500 | 501 | // getter / setters: 502 | /** 503 | * Indicates whether WebGL is being used for rendering. For example, this would be false if WebGL is not 504 | * supported in the browser. 505 | * @readonly 506 | * @property isWebGL 507 | * @type {Boolean} 508 | **/ 509 | p._get_isWebGL = function() { 510 | return !!this._webGLContext; 511 | }; 512 | 513 | try { 514 | Object.defineProperties(p, { 515 | isWebGL: { get: p._get_isWebGL } 516 | }); 517 | } catch (e) {} // TODO: use Log 518 | 519 | 520 | // public methods: 521 | /** 522 | * Adds a child to the top of the display list. 523 | * Only children of type SpriteContainer, Sprite, Bitmap, BitmapText, or DOMElement are allowed. 524 | * Children also MUST have either an image or spriteSheet defined on them (unless it's a DOMElement). 525 | * 526 | *

Example

527 | * container.addChild(bitmapInstance); 528 | * 529 | * You can also add multiple children at once: 530 | * 531 | * container.addChild(bitmapInstance, shapeInstance, textInstance); 532 | * 533 | * @method addChild 534 | * @param {DisplayObject} child The display object to add. 535 | * @return {DisplayObject} The child that was added, or the last child if multiple children were added. 536 | **/ 537 | p.addChild = function(child) { 538 | if (child == null) { return child; } 539 | if (arguments.length > 1) { 540 | return this.addChildAt.apply(this, Array.prototype.slice.call(arguments).concat([this.children.length])); 541 | } else { 542 | return this.addChildAt(child, this.children.length); 543 | } 544 | }; 545 | 546 | /** 547 | * Adds a child to the display list at the specified index, bumping children at equal or greater indexes up one, and 548 | * setting its parent to this Container. 549 | * Only children of type SpriteContainer, Sprite, Bitmap, BitmapText, or DOMElement are allowed. 550 | * Children also MUST have either an image or spriteSheet defined on them (unless it's a DOMElement). 551 | * 552 | *

Example

553 | * 554 | * addChildAt(child1, index); 555 | * 556 | * You can also add multiple children, such as: 557 | * 558 | * addChildAt(child1, child2, ..., index); 559 | * 560 | * The index must be between 0 and numChildren. For example, to add myShape under otherShape in the display list, 561 | * you could use: 562 | * 563 | * container.addChildAt(myShape, container.getChildIndex(otherShape)); 564 | * 565 | * This would also bump otherShape's index up by one. Fails silently if the index is out of range. 566 | * 567 | * @method addChildAt 568 | * @param {DisplayObject} child The display object to add. 569 | * @param {Number} index The index to add the child at. 570 | * @return {DisplayObject} Returns the last child that was added, or the last child if multiple children were added. 571 | **/ 572 | p.addChildAt = function(child, index) { 573 | var l = arguments.length; 574 | var indx = arguments[l-1]; // can't use the same name as the index param or it replaces arguments[1] 575 | if (indx < 0 || indx > this.children.length) { return arguments[l-2]; } 576 | if (l > 2) { 577 | for (var i=0; i= 1) { 581 | // The child is compatible with SpriteStage. 582 | } else { 583 | console && console.log("Error: You can only add children of type SpriteContainer, Sprite, Bitmap, BitmapText, or DOMElement. [" + child.toString() + "]"); 584 | return child; 585 | } 586 | if (!child.image && !child.spriteSheet && child._spritestage_compatibility <= 4) { 587 | console && console.log("Error: You can only add children that have an image or spriteSheet defined on them. [" + child.toString() + "]"); 588 | return child; 589 | } 590 | if (child.parent) { child.parent.removeChild(child); } 591 | child.parent = this; 592 | this.children.splice(index, 0, child); 593 | return child; 594 | }; 595 | 596 | /** docced in super class **/ 597 | p.update = function(props) { 598 | if (!this.canvas) { return; } 599 | if (this.tickOnUpdate) { this.tick(props); } 600 | this.dispatchEvent("drawstart"); // TODO: make cancellable? 601 | if (this.autoClear) { this.clear(); } 602 | var ctx = this._setWebGLContext(); 603 | if (ctx) { 604 | // Use WebGL. 605 | this.draw(ctx, false); 606 | } else { 607 | // Use 2D. 608 | ctx = this.canvas.getContext("2d"); 609 | ctx.save(); 610 | this.updateContext(ctx); 611 | this.draw(ctx, false); 612 | ctx.restore(); 613 | } 614 | this.dispatchEvent("drawend"); 615 | }; 616 | 617 | /** 618 | * Clears the target canvas. Useful if {{#crossLink "Stage/autoClear:property"}}{{/crossLink}} is set to `false`. 619 | * @method clear 620 | **/ 621 | p.clear = function() { 622 | if (!this.canvas) { return; } 623 | var ctx = this._setWebGLContext(); 624 | if (ctx) { 625 | // Use WebGL. 626 | ctx.clear(ctx.COLOR_BUFFER_BIT); 627 | } else { 628 | // Use 2D. 629 | ctx = this.canvas.getContext("2d"); 630 | ctx.setTransform(1, 0, 0, 1, 0, 0); 631 | ctx.clearRect(0, 0, this.canvas.width + 1, this.canvas.height + 1); 632 | } 633 | }; 634 | 635 | /** 636 | * Draws the stage into the specified context (using WebGL) ignoring its visible, alpha, shadow, and transform. 637 | * If WebGL is not supported in the browser, it will default to a 2D context. 638 | * Returns true if the draw was handled (useful for overriding functionality). 639 | * 640 | * NOTE: This method is mainly for internal use, though it may be useful for advanced uses. 641 | * @method draw 642 | * @param {CanvasRenderingContext2D} ctx The canvas 2D context object to draw into. 643 | * @param {Boolean} [ignoreCache=false] Indicates whether the draw operation should ignore any current cache. 644 | * For example, used for drawing the cache (to prevent it from simply drawing an existing cache back 645 | * into itself). 646 | **/ 647 | p.draw = function(ctx, ignoreCache) { 648 | if (typeof WebGLRenderingContext !== 'undefined' && (ctx === this._webGLContext || ctx instanceof WebGLRenderingContext)) { 649 | this._drawWebGLKids(this.children, ctx); 650 | return true; 651 | } else { 652 | return this.Stage_draw(ctx, ignoreCache); 653 | } 654 | }; 655 | 656 | /** 657 | * Update the WebGL viewport. Note that this does NOT update the canvas element's width/height. 658 | * @method updateViewport 659 | * @param {Number} width 660 | * @param {Number} height 661 | **/ 662 | p.updateViewport = function (width, height) { 663 | this._viewportWidth = width; 664 | this._viewportHeight = height; 665 | 666 | if (this._webGLContext) { 667 | this._webGLContext.viewport(0, 0, this._viewportWidth, this._viewportHeight); 668 | 669 | if (!this._projectionMatrix) { 670 | this._projectionMatrix = new Float32Array([0, 0, 0, 0, 0, 1, -1, 1, 1]); 671 | } 672 | this._projectionMatrix[0] = 2 / width; 673 | this._projectionMatrix[4] = -2 / height; 674 | } 675 | }; 676 | 677 | /** 678 | * Clears an image's texture to free it up for garbage collection. 679 | * @method clearImageTexture 680 | * @param {HTMLImageElement} image 681 | **/ 682 | p.clearImageTexture = function(image) { 683 | image.__easeljs_texture = null; 684 | }; 685 | 686 | /** 687 | * Returns a string representation of this object. 688 | * @method toString 689 | * @return {String} a string representation of the instance. 690 | **/ 691 | p.toString = function() { 692 | return "[SpriteStage (name="+ this.name +")]"; 693 | }; 694 | 695 | // private methods: 696 | 697 | /** 698 | * Initializes rendering with WebGL using the current canvas element. 699 | * @method _initializeWebGL 700 | * @protected 701 | **/ 702 | p._initializeWebGL = function() { 703 | this._clearColor = { r: 0.0, g: 0.0, b: 0.0, a: 0.0 }; 704 | 705 | this._setWebGLContext(); 706 | }; 707 | 708 | /** 709 | * Sets the WebGL context to use for future draws. 710 | * @method _setWebGLContext 711 | * @return {WebGLRenderingContext} The newly created context. 712 | * @protected 713 | **/ 714 | p._setWebGLContext = function() { 715 | if (this.canvas) { 716 | if (!this._webGLContext || this._webGLContext.canvas !== this.canvas) { 717 | // A context hasn't been defined yet, 718 | // OR the defined context belongs to a different canvas, so reinitialize. 719 | this._initializeWebGLContext(); 720 | } 721 | } else { 722 | this._webGLContext = null; 723 | } 724 | return this._webGLContext; 725 | }; 726 | 727 | /** 728 | * Sets up the WebGL context for rendering. 729 | * @method _initializeWebGLContext 730 | * @protected 731 | **/ 732 | p._initializeWebGLContext = function() { 733 | var options = { 734 | depth: false, // Disable the depth buffer as it isn't used. 735 | alpha: true, // Make the canvas background transparent. 736 | preserveDrawingBuffer: this._preserveDrawingBuffer, 737 | antialias: this._antialias, 738 | premultipliedAlpha: true // Assume the drawing buffer contains colors with premultiplied alpha. 739 | }; 740 | var ctx = this._webGLContext = this.canvas.getContext("webgl", options) || this.canvas.getContext("experimental-webgl", options); 741 | 742 | if (!ctx) { 743 | // WebGL is not supported in this browser. 744 | return; 745 | } 746 | 747 | // Enforcing 1 texture per draw for now until an optimized implementation for multiple textures is made: 748 | this._maxTexturesPerDraw = 1; // ctx.getParameter(ctx.MAX_TEXTURE_IMAGE_UNITS); 749 | 750 | // Set the default color the canvas should render when clearing: 751 | this._setClearColor(this._clearColor.r, this._clearColor.g, this._clearColor.b, this._clearColor.a); 752 | 753 | // Enable blending and set the blending functions that work with the premultiplied alpha settings: 754 | ctx.enable(ctx.BLEND); 755 | ctx.blendFuncSeparate(ctx.SRC_ALPHA, ctx.ONE_MINUS_SRC_ALPHA, ctx.ONE, ctx.ONE_MINUS_SRC_ALPHA); 756 | 757 | // Do not premultiply textures' alpha channels when loading them in: 758 | ctx.pixelStorei(ctx.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false); 759 | 760 | // Create the shader program that will be used for drawing: 761 | this._createShaderProgram(ctx); 762 | 763 | if (this._webGLErrorDetected) { 764 | // Error detected during this._createShaderProgram(). 765 | this._webGLContext = null; 766 | return; 767 | } 768 | 769 | // Create the vertices and indices buffers. 770 | this._createBuffers(ctx); 771 | 772 | // Update the viewport with the initial canvas dimensions: 773 | this.updateViewport(this._viewportWidth || this.canvas.width || 0, this._viewportHeight || this.canvas.height || 0); 774 | }; 775 | 776 | /** 777 | * Sets the color to use when the WebGL canvas has been cleared. 778 | * @method _setClearColor 779 | * @param {Number} r A number between 0 and 1. 780 | * @param {Number} g A number between 0 and 1. 781 | * @param {Number} b A number between 0 and 1. 782 | * @param {Number} a A number between 0 and 1. 783 | * @protected 784 | **/ 785 | p._setClearColor = function (r, g, b, a) { 786 | this._clearColor.r = r; 787 | this._clearColor.g = g; 788 | this._clearColor.b = b; 789 | this._clearColor.a = a; 790 | 791 | if (this._webGLContext) { 792 | this._webGLContext.clearColor(r, g, b, a); 793 | } 794 | }; 795 | 796 | /** 797 | * Creates the shader program that's going to be used to draw everything. 798 | * @method _createShaderProgram 799 | * @param {WebGLRenderingContext} ctx 800 | * @protected 801 | **/ 802 | p._createShaderProgram = function(ctx) { 803 | 804 | 805 | var fragmentShader = this._createShader(ctx, ctx.FRAGMENT_SHADER, 806 | "precision mediump float;" + 807 | 808 | "uniform sampler2D uSampler0;" + 809 | 810 | "varying vec3 vTextureCoord;" + 811 | 812 | "void main(void) {" + 813 | "vec4 color = texture2D(uSampler0, vTextureCoord.st);" + 814 | "gl_FragColor = vec4(color.rgb, color.a * vTextureCoord.z);" + 815 | "}" 816 | ); 817 | 818 | var vertexShader = this._createShader(ctx, ctx.VERTEX_SHADER, 819 | "attribute vec2 aVertexPosition;" + 820 | "attribute vec3 aTextureCoord;" + 821 | 822 | "uniform mat3 uPMatrix;" + 823 | 824 | "varying vec3 vTextureCoord;" + 825 | 826 | "void main(void) {" + 827 | "vTextureCoord = aTextureCoord;" + 828 | 829 | "gl_Position = vec4((uPMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);" + 830 | "}" 831 | ); 832 | 833 | if (this._webGLErrorDetected || !fragmentShader || !vertexShader) { return; } 834 | 835 | var program = ctx.createProgram(); 836 | ctx.attachShader(program, fragmentShader); 837 | ctx.attachShader(program, vertexShader); 838 | ctx.linkProgram(program); 839 | 840 | if(!ctx.getProgramParameter(program, ctx.LINK_STATUS)) { 841 | // alert("Could not link program. " + ctx.getProgramInfoLog(program)); 842 | this._webGLErrorDetected = true; 843 | return; 844 | } 845 | 846 | program.vertexPositionAttribute = ctx.getAttribLocation(program, "aVertexPosition"); 847 | program.textureCoordAttribute = ctx.getAttribLocation(program, "aTextureCoord"); 848 | 849 | program.sampler0uniform = ctx.getUniformLocation(program, "uSampler0"); 850 | 851 | ctx.enableVertexAttribArray(program.vertexPositionAttribute); 852 | ctx.enableVertexAttribArray(program.textureCoordAttribute); 853 | 854 | program.pMatrixUniform = ctx.getUniformLocation(program, "uPMatrix"); 855 | 856 | ctx.useProgram(program); 857 | 858 | this._shaderProgram = program; 859 | }; 860 | 861 | /** 862 | * Creates a shader from the specified string. 863 | * @method _createShader 864 | * @param {WebGLRenderingContext} ctx 865 | * @param {Number} type The type of shader to create. 866 | * @param {String} str The definition for the shader. 867 | * @return {WebGLShader} 868 | * @protected 869 | **/ 870 | p._createShader = function(ctx, type, str) { 871 | var shader = ctx.createShader(type); 872 | ctx.shaderSource(shader, str); 873 | ctx.compileShader(shader); 874 | 875 | if (!ctx.getShaderParameter(shader, ctx.COMPILE_STATUS)) { 876 | // alert("Could not compile shader. " + ctx.getShaderInfoLog(shader)); 877 | this._webGLErrorDetected = true; 878 | return null; 879 | } 880 | 881 | return shader; 882 | }; 883 | 884 | /** 885 | * Sets up the necessary vertices and indices buffers. 886 | * @method _createBuffers 887 | * @param {WebGLRenderingContext} ctx 888 | * @protected 889 | **/ 890 | p._createBuffers = function(ctx) { 891 | this._verticesBuffer = ctx.createBuffer(); 892 | ctx.bindBuffer(ctx.ARRAY_BUFFER, this._verticesBuffer); 893 | 894 | var byteCount = SpriteStage.NUM_VERTEX_PROPERTIES * 4; // ctx.FLOAT = 4 bytes 895 | ctx.vertexAttribPointer(this._shaderProgram.vertexPositionAttribute, 2, ctx.FLOAT, ctx.FALSE, byteCount, 0); 896 | ctx.vertexAttribPointer(this._shaderProgram.textureCoordAttribute, 3, ctx.FLOAT, ctx.FALSE, byteCount, 2 * 4); 897 | 898 | this._indicesBuffer = ctx.createBuffer(); 899 | 900 | this._setMaxBoxesPoints(ctx, SpriteStage.MAX_BOXES_POINTS_INCREMENT); 901 | }; 902 | 903 | /** 904 | * Updates the maximum total number of boxes points that can be defined per draw call, 905 | * and updates the buffers with the new array length sizes. 906 | * @method _setMaxBoxesPoints 907 | * @param {WebGLRenderingContext} ctx 908 | * @param {Number} value The new this._maxBoxesPointsPerDraw value. 909 | * @protected 910 | **/ 911 | p._setMaxBoxesPoints = function (ctx, value) { 912 | this._maxBoxesPointsPerDraw = value; 913 | this._maxBoxesPerDraw = (this._maxBoxesPointsPerDraw / SpriteStage.POINTS_PER_BOX) | 0; 914 | this._maxIndicesPerDraw = this._maxBoxesPerDraw * SpriteStage.INDICES_PER_BOX; 915 | 916 | ctx.bindBuffer(ctx.ARRAY_BUFFER, this._verticesBuffer); 917 | this._vertices = new Float32Array(this._maxBoxesPerDraw * SpriteStage.NUM_VERTEX_PROPERTIES_PER_BOX); 918 | ctx.bufferData(ctx.ARRAY_BUFFER, this._vertices, ctx.DYNAMIC_DRAW); 919 | 920 | // Set up indices for multiple boxes: 921 | this._indices = new Uint16Array(this._maxIndicesPerDraw); // Indices are set once and reused. 922 | for (var i = 0, l = this._indices.length; i < l; i += SpriteStage.INDICES_PER_BOX) { 923 | var j = i * SpriteStage.POINTS_PER_BOX / SpriteStage.INDICES_PER_BOX; 924 | 925 | // Indices for the 2 triangles that make the box: 926 | this._indices[i] = j; 927 | this._indices[i + 1] = j + 1; 928 | this._indices[i + 2] = j + 2; 929 | this._indices[i + 3] = j; 930 | this._indices[i + 4] = j + 2; 931 | this._indices[i + 5] = j + 3; 932 | } 933 | ctx.bindBuffer(ctx.ELEMENT_ARRAY_BUFFER, this._indicesBuffer); 934 | ctx.bufferData(ctx.ELEMENT_ARRAY_BUFFER, this._indices, ctx.STATIC_DRAW); 935 | }; 936 | 937 | /** 938 | * Sets up an image's WebGL texture. 939 | * @method _setupImageTexture 940 | * @param {WebGLRenderingContext} ctx The canvas WebGL context object to draw into. 941 | * @param {Object} image 942 | * @return {WebGLTexture} 943 | * @protected 944 | **/ 945 | p._setupImageTexture = function(ctx, image) { 946 | if (image && (image.naturalWidth || image.getContext || image.readyState >= 2)) { 947 | // Create and use a new texture for this image if it doesn't already have one: 948 | var texture = image.__easeljs_texture; 949 | if (!texture) { 950 | texture = image.__easeljs_texture = ctx.createTexture(); 951 | ctx.bindTexture(ctx.TEXTURE_2D, texture); 952 | ctx.texImage2D(ctx.TEXTURE_2D, 0, ctx.RGBA, ctx.RGBA, ctx.UNSIGNED_BYTE, image); 953 | ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_MIN_FILTER, ctx.NEAREST); 954 | ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_MAG_FILTER, ctx.LINEAR); 955 | ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_WRAP_S, ctx.CLAMP_TO_EDGE); 956 | ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_WRAP_T, ctx.CLAMP_TO_EDGE); 957 | } 958 | return texture; 959 | } 960 | }; 961 | 962 | /** 963 | * Draw all the kids into the WebGL context. 964 | * @method _drawWebGLKids 965 | * @param {Array} kids The list of kids to draw. 966 | * @param {WebGLRenderingContext} ctx The canvas WebGL context object to draw into. 967 | * @param {Matrix2D} parentMVMatrix The parent's global transformation matrix. 968 | * @protected 969 | **/ 970 | p._drawWebGLKids = function(kids, ctx, parentMVMatrix) { 971 | var kid, mtx, 972 | snapToPixelEnabled = this.snapToPixelEnabled, 973 | image = null, 974 | leftSide = 0, topSide = 0, rightSide = 0, bottomSide = 0, 975 | vertices = this._vertices, 976 | numVertexPropertiesPerBox = SpriteStage.NUM_VERTEX_PROPERTIES_PER_BOX, 977 | maxIndexSize = SpriteStage.MAX_INDEX_SIZE, 978 | maxBoxIndex = this._maxBoxesPerDraw - 1; 979 | 980 | for (var i = 0, l = kids.length; i < l; i++) { 981 | kid = kids[i]; 982 | if (!kid.isVisible()) { continue; } 983 | 984 | // Get the texture for this display branch: 985 | var image = kid.image || (kid.spriteSheet && kid.spriteSheet._images[0]); 986 | if (!image) { continue; } // kid that doesn't have image (ex. DOMElement). 987 | var texture = image.__easeljs_texture; 988 | if (!texture && !(texture = this._setupImageTexture(ctx, image))) { continue; } // no texture available (ex. may not be loaded yet). 989 | 990 | mtx = kid._props.matrix; 991 | 992 | // Get the kid's global matrix (relative to the stage): 993 | mtx = (parentMVMatrix ? mtx.copy(parentMVMatrix) : mtx.identity()).appendTransform(kid.x, kid.y, kid.scaleX, kid.scaleY, kid.rotation, kid.skewX, kid.skewY, kid.regX, kid.regY); 994 | 995 | // Set default texture coordinates: 996 | var uStart = 0, uEnd = 1, 997 | vStart = 0, vEnd = 1; 998 | 999 | // Define the untransformed bounding box sides and get the kid's image to use for textures: 1000 | if (kid._spritestage_compatibility === 4) { 1001 | leftSide = 0; 1002 | topSide = 0; 1003 | rightSide = image.width; 1004 | bottomSide = image.height; 1005 | } else if (kid._spritestage_compatibility === 2) { 1006 | var frame = kid.spriteSheet.getFrame(kid.currentFrame), 1007 | rect = frame.rect; 1008 | 1009 | leftSide = -frame.regX; 1010 | topSide = -frame.regY; 1011 | rightSide = leftSide + rect.width; 1012 | bottomSide = topSide + rect.height; 1013 | 1014 | uStart = rect.x / image.width; 1015 | vStart = rect.y / image.height; 1016 | uEnd = uStart + (rect.width / image.width); 1017 | vEnd = vStart + (rect.height / image.height); 1018 | } else { 1019 | image = null; 1020 | 1021 | // Update BitmapText instances: 1022 | if (kid._spritestage_compatibility === 3) { 1023 | // TODO: this might change in the future to use a more general approach. 1024 | kid._updateText(); 1025 | } 1026 | } 1027 | 1028 | // Detect if this kid is a new display branch: 1029 | if (!parentMVMatrix && kid._spritestage_compatibility <= 4 && texture !== this._drawTexture) { 1030 | // Draw to the GPU if a texture is already in use: 1031 | this._drawToGPU(ctx); 1032 | this._drawTexture = texture; 1033 | } 1034 | 1035 | if (image !== null) { 1036 | // Set vertices' data: 1037 | 1038 | var offset = ++this._currentBoxIndex * numVertexPropertiesPerBox, 1039 | a = mtx.a, 1040 | b = mtx.b, 1041 | c = mtx.c, 1042 | d = mtx.d, 1043 | tx = mtx.tx, 1044 | ty = mtx.ty; 1045 | 1046 | if (snapToPixelEnabled && kid.snapToPixel) { 1047 | tx = tx + (tx < 0 ? -0.5 : 0.5) | 0; 1048 | ty = ty + (ty < 0 ? -0.5 : 0.5) | 0; 1049 | } 1050 | 1051 | // Positions (calculations taken from Matrix2D.transformPoint): 1052 | vertices[offset] = leftSide * a + topSide * c + tx; 1053 | vertices[offset + 1] = leftSide * b + topSide * d + ty; 1054 | vertices[offset + 5] = leftSide * a + bottomSide * c + tx; 1055 | vertices[offset + 6] = leftSide * b + bottomSide * d + ty; 1056 | vertices[offset + 10] = rightSide * a + bottomSide * c + tx; 1057 | vertices[offset + 11] = rightSide * b + bottomSide * d + ty; 1058 | vertices[offset + 15] = rightSide * a + topSide * c + tx; 1059 | vertices[offset + 16] = rightSide * b + topSide * d + ty; 1060 | 1061 | // Texture coordinates: 1062 | vertices[offset + 2] = vertices[offset + 7] = uStart; 1063 | vertices[offset + 12] = vertices[offset + 17] = uEnd; 1064 | vertices[offset + 3] = vertices[offset + 18] = vStart; 1065 | vertices[offset + 8] = vertices[offset + 13] = vEnd; 1066 | 1067 | // Alphas: 1068 | vertices[offset + 4] = vertices[offset + 9] = vertices[offset + 14] = vertices[offset + 19] = kid.alpha; 1069 | 1070 | // Draw to the GPU if the maximum number of boxes per a draw has been reached: 1071 | if (this._currentBoxIndex === maxBoxIndex) { 1072 | this._drawToGPU(ctx); 1073 | this._drawTexture = texture; 1074 | 1075 | // If possible, increase the amount of boxes that can be used per draw call: 1076 | if (this._maxBoxesPointsPerDraw < maxIndexSize) { 1077 | this._setMaxBoxesPoints(ctx, this._maxBoxesPointsPerDraw + SpriteStage.MAX_BOXES_POINTS_INCREMENT); 1078 | maxBoxIndex = this._maxBoxesPerDraw - 1; 1079 | } 1080 | } 1081 | } 1082 | 1083 | // Draw children: 1084 | if (kid.children) { 1085 | this._drawWebGLKids(kid.children, ctx, mtx); 1086 | maxBoxIndex = this._maxBoxesPerDraw - 1; 1087 | } 1088 | } 1089 | 1090 | // draw anything remaining, if this is the stage: 1091 | if (!parentMVMatrix) { this._drawToGPU(ctx); } 1092 | }; 1093 | 1094 | /** 1095 | * Draws all the currently defined boxes to the GPU. 1096 | * @method _drawToGPU 1097 | * @param {WebGLRenderingContext} ctx The canvas WebGL context object to draw into. 1098 | * @protected 1099 | **/ 1100 | p._drawToGPU = function(ctx) { 1101 | if (!this._drawTexture) { return; } 1102 | var numBoxes = this._currentBoxIndex + 1; 1103 | 1104 | ctx.activeTexture(ctx.TEXTURE0); 1105 | ctx.bindTexture(ctx.TEXTURE_2D, this._drawTexture); 1106 | ctx.uniform1i(this._shaderProgram.sampler0uniform, 0); 1107 | 1108 | ctx.bindBuffer(ctx.ARRAY_BUFFER, this._verticesBuffer); 1109 | 1110 | ctx.bindBuffer(ctx.ELEMENT_ARRAY_BUFFER, this._indicesBuffer); 1111 | ctx.uniformMatrix3fv(this._shaderProgram.pMatrixUniform, false, this._projectionMatrix); 1112 | ctx.bufferSubData(ctx.ARRAY_BUFFER, 0, this._vertices); 1113 | ctx.drawElements(ctx.TRIANGLES, numBoxes * SpriteStage.INDICES_PER_BOX, ctx.UNSIGNED_SHORT, 0); 1114 | 1115 | // Reset draw vars: 1116 | this._currentBoxIndex = -1; 1117 | this._drawTexture = null; 1118 | }; 1119 | 1120 | 1121 | createjs.SpriteStage = createjs.promote(SpriteStage, "Stage"); 1122 | }()); -------------------------------------------------------------------------------- /PlanetaryGary/sounds.json: -------------------------------------------------------------------------------- 1 | { 2 | "path": "assets/sounds/", 3 | "manifest": [ 4 | {"src":"garywalk_chill.mp3", "id":"music"}, 5 | {"src":"BodySlam.mp3", "id":"BodySlam"}, 6 | {"src":"DirtSlide.mp3", "id":"DirtSlide"}, 7 | {"src":"EnemyHit.mp3", "id":"EnemyHit"}, 8 | {"src":"HitHard4.mp3", "id":"HitHard4"}, 9 | {"src":"LaserGunShot.mp3", "id":"LaserGunShot", "data":3}, 10 | {"src":"PressPlay.mp3", "id":"PressPlay"}, 11 | {"src":"TunnelCollision.mp3", "id":"TunnelCollision"}, 12 | {"src":"jump4.mp3", "id":"Jump"} 13 | ] 14 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | sandbox 2 | ======= 3 | 4 | Contains demos, helper classes, experiments, and other resources that don't belong in the main repos. -------------------------------------------------------------------------------- /eLearning_Lever/README.md: -------------------------------------------------------------------------------- 1 | E-Learning Example 2 | ======= 3 | 4 | Shows an example of embedding a CreateJS-based interactive learning piece into a larger document. 5 | 6 | ![ScreenShot](https://raw.github.com/CreateJS/sandbox/master/eLearning_Lever/README_1.jpg) 7 | 8 | **[View this example online.](http://sandbox.createjs.com/eLearning_Lever/demo.html)** 9 | 10 | This is to demonstrate how to approach similar scenarios, not to showcase the interactive capabilities of the CreateJS libraries (ie. the actual interactive piece is intentionally very simple). 11 | 12 | Highlights: 13 | - less than 2kb over-the-wire size (gzipped, excluding CDN libraries) 14 | - touch / mobile friendly interactive 15 | - image fallback for older browsers 16 | - render only occurs during interaction, saving CPU and battery 17 | - uses hand cursor to indicate interactive elements 18 | 19 | All text content is derived from Wikipedia and is subject to the Creative Commons Attribution-ShareAlike 3.0 Unported License. -------------------------------------------------------------------------------- /eLearning_Lever/README_1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CreateJS/sandbox/bfcfb5afaaed512c983159285a582dd8c0bbb6ab/eLearning_Lever/README_1.jpg -------------------------------------------------------------------------------- /eLearning_Lever/alternateImage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CreateJS/sandbox/bfcfb5afaaed512c983159285a582dd8c0bbb6ab/eLearning_Lever/alternateImage.png -------------------------------------------------------------------------------- /eLearning_Lever/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Unit 3: Levers 5 | 45 | 46 | 47 |
48 | 49 |
50 |

Lever

51 |

A lever is a machine consisting of a beam or rigid rod pivoted at a fixed hinge, or fulcrum. It is one of the six simple machines identified by Renaissance scientists. The word comes from the French lever, "to raise", cf. a levant. A lever amplifies an input force to provide a greater output force, which is said to provide leverage. The ratio of the output force to the input force is the ideal mechanical advantage of the lever.

52 |
53 | 54 |
55 |

Early use

56 |

The earliest remaining writings regarding levers date from the 3rd century BC and were provided by Archimedes. "Give me a place to stand, and I shall move the Earth with it" is a remark of Archimedes who formally stated the correct mathematical principle of levers (quoted by Pappus of Alexandria).

57 |

It is assumed that in ancient Egypt, constructors used the lever to move and uplift obelisks weighting more than 100 tons.

58 |
59 | 60 |
61 |

Force and levers

62 |
63 | 64 | 65 | 66 | 67 |
68 | Interactive illustration of a class 1 lever showing the beam (white), fulcrum (blue), a mass (green), and the input / effort (red) required to lift the mass. Click and drag the fulcrum. 69 |
70 |
71 |

A lever is a beam connected to ground by a hinge, or pivot, called a fulcrum. The ideal lever does not dissipate or store energy, which means there is no friction in the hinge or bending in the beam. In this case, the power into the lever equals the power out, and the ratio of output to input force is given by the ratio of the distances from the fulcrum to the points of application of these forces. This is known as the law of the lever.

72 |

The mechanical advantage of a lever can be determined by considering the balance of moments or torque, T, about the fulcrum, where M1 is the input force to the lever and M2 is the output force. The distances a and b are the perpendicular distances between the forces and the fulcrum.

73 |

The mechanical advantage of the lever is the ratio of output force to input force.

74 |

This relationship shows that the mechanical advantage can be computed from ratio of the distances from the fulcrum to where the input and output forces are applied to the lever.

75 |
76 | 77 |
78 |

Classes of levers

79 |

Levers are classified by the relative positions of the fulcrum and the input and output forces. It is common to call the input force the effort and the output force the load or the resistance. This allows the identification of three classes of levers by the relative locations of the fulcrum, the resistance and the effort:

80 |
    81 |
  • Class 1: Fulcrum in the middle: the effort is applied on one side of the fulcrum and the resistance on the other side, for example, a crowbar or a pair of scissors.
    • 82 |
  • Class 2: Resistance in the middle: the effort is applied on one side of the resistance and the fulcrum is located on the other side, for example, a wheelbarrow, a nutcracker, a bottle opener or the brake pedal of a car. Mechanical advantage is greater than 1.
    • 83 |
  • Class 3: Effort in the middle: the resistance is on one side of the effort and the fulcrum is located on the other side, for example, a pair of tweezers or the human mandible. Mechanical advantage is less than 1.
    • 84 |
85 |

These cases are described by the mnemonic "fre 123" where the fulcrum is in the middle for the 1st class lever, the resistance is in the middle for the 2nd class lever, and the effort is in the middle for the 3rd class lever.

86 |
87 | 88 |
89 | All text content is derived from Wikipedia and is subject to the Creative Commons Attribution-ShareAlike 3.0 Unported License. 90 |
91 | 92 |
93 | 94 | 95 | 96 | 97 | -------------------------------------------------------------------------------- /eLearning_Lever/interactive.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 3 | var stage, w, h, beamW, beamH, effortH, beam, fulcrum, effort; 4 | var c = createjs; // shortcut 5 | var leverPosition = 0.5; 6 | 7 | initInteractive(); 8 | function initInteractive() { 9 | // define the stage, and enable interaction for touch devices: 10 | stage = new c.Stage("interactive"); 11 | c.Touch.enable(stage); 12 | // let the user drag outside the canvas: 13 | stage.mouseMoveOutside = true; 14 | // we need this to show the hand cursor on the fulcrum: 15 | stage.enableMouseOver(); 16 | 17 | // we'll use these for some calculations: 18 | w = stage.canvas.width; 19 | h = stage.canvas.height; 20 | beamW = w-50; 21 | beamH = 20; 22 | 23 | // create the beam, and the attached mass: 24 | beam = stage.addChild(new c.Shape()); 25 | beam.y = h-60; 26 | beam.x = w/2; 27 | beam.graphics.beginStroke("#000").setStrokeStyle(3) 28 | .drawRect(-beamW/2,0,beamW,-beamH) 29 | .beginFill("#0F0").drawCircle(-beamW/2+10, -25-beamH-2, 25); 30 | 31 | // create the effort arrow, the actual drawing happens in drawLever: 32 | effort = stage.addChild(new c.Shape()); 33 | effortH = (beam.y-beamH-10)/0.8; 34 | 35 | // draw the fulcrum: 36 | fulcrum = stage.addChild(new c.Shape()); 37 | fulcrum.y = beam.y; 38 | fulcrum.graphics.beginFill("#00F").beginStroke("#000") 39 | .setStrokeStyle(3).drawPolyStar(0,30,30,3,0,-90); 40 | 41 | if (c.Touch.isSupported()) { 42 | // if we're using touch, then we can add a larger hit area to the fulcrum 43 | // to make it easier to hit. 44 | fulcrum.hitArea = new c.Shape(); 45 | fulcrum.hitArea.graphics.beginFill("#000").drawRect(-40,0,80,60); 46 | } 47 | 48 | // set up the fulcrum for interaction: 49 | fulcrum.cursor = "pointer"; 50 | fulcrum.addEventListener("pressmove", handleFulcrumMove); 51 | 52 | // draw the default lever diagram: 53 | drawLever(); 54 | } 55 | 56 | function drawLever() { 57 | // move the regX around, so the beam rotates around the fulcrum: 58 | beam.regX = (leverPosition-0.5)*beamW; 59 | beam.x = w/2+beam.regX; 60 | // this isn't physically correct, it just looks nice: 61 | beam.rotation = -(leverPosition-0.5)*15; 62 | 63 | // position the fulcrum: 64 | // uses the same calculation as the beam regX, so we can reuse that value. 65 | fulcrum.x = w/2+beam.regX; 66 | 67 | // draw the effort arrow: 68 | 69 | // localToGlobal provides the current stage position for a point near the right 70 | // end of the beam, accounting for the beam rotation and position: 71 | var pt = beam.localToGlobal(beamW/2-10, -beamH); 72 | effort.setTransform(pt.x,pt.y); 73 | // calculate the arrow width & height 74 | var ew = leverPosition*effortH*0.2; 75 | var eh = (1-leverPosition)*effortH; 76 | // draw the arrow, making sure to clear the old one first: 77 | effort.graphics.clear() 78 | .beginFill("#F00") 79 | .drawPolyStar(0,-ew,ew,3,0,90) 80 | .beginFill("#F00") 81 | .drawRect(-ew/2,-ew,ew,-eh); 82 | 83 | // redraw the stage 84 | stage.update(); 85 | } 86 | 87 | function handleFulcrumMove(evt) { 88 | // calculate the new lever position from the current mouse location: 89 | leverPosition = Math.max(0.2, Math.min(0.8,(evt.stageX-(w-beamW)/2)/beamW)); 90 | // redraw the lever: 91 | drawLever(); 92 | } 93 | 94 | })(); --------------------------------------------------------------------------------