Refactor to use Greensock, cleanup method names, commenting, etc.

MattSurabian · Nov 8, 2015 · 90c8a73 · 90c8a73
1 parent 061b597
commit 90c8a73
Show file tree

Hide file tree

Showing 13 changed files with 12,398 additions and 1,833 deletions.
diff --git a/dist/audio.ogg b/dist/audio.ogg
diff --git a/dist/duckhunt.js b/dist/duckhunt.js
diff --git a/dist/index.html b/dist/index.html
@@ -2,7 +2,7 @@
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 <html>
 <head>
-  <title>pixi.js example 1</title>
+  <title>DuckHuntJS</title>
   <style>
     body {
       overflow:hidden;

diff --git a/gulpfile.js b/gulpfile.js
@@ -95,5 +95,6 @@ gulp.task('deploy', function() {
   ]));
 });
 
-gulp.task('default', ['images', 'audio', 'jshint', 'jscs', 'modules']);
-gulp.task('dev', ['default', 'watch', 'serve']);
+gulp.task('js', ['jshint', 'jscs', 'modules']);
+gulp.task('dev', ['default', 'watch', 'serve']);
+gulp.task('default', ['images', 'audio', 'js']);
diff --git a/main.js b/main.js
@@ -2,7 +2,6 @@ import Game from './src/modules/Game';
 
 document.addEventListener('DOMContentLoaded', function() {
 
-  // create the root of the scene graph
   let game = new Game({
     spritesheet: 'sprites.json'
   }).load();

diff --git a/package.json b/package.json
@@ -26,6 +26,7 @@
     "bluebird": "^2.9.32",
     "browserify": "^10.2.4",
     "glob": "^5.0.13",
+    "gsap": "^1.18.0",
     "gulp": "^3.9.0",
     "gulp-babel": "^5.1.0",
     "gulp-connect": "^2.2.0",

diff --git a/src/libs/utils.js b/src/libs/utils.js
@@ -3,7 +3,7 @@ module.exports.pointDistance = function(point1, point2) {
 };
 
 module.exports.directionOfTravel = function(pointStart, pointEnd) {
-  let direction;
+  let direction = '';
 
   //positive means down
   let rise = pointEnd.y - pointStart.y;

diff --git a/src/modules/Character.js b/src/modules/Character.js
@@ -1,21 +1,28 @@
-const PIXI = require('pixi.js');
-
-const _find = require('lodash/collection/find');
-const _result = require('lodash/object/result');
+import PIXI from 'pixi.js';
+import TimelineLight from 'gsap/src/uncompressed/TimelineLite.js';
+import _noop from 'lodash/utility/noop';
+import _find from 'lodash/collection/find';
+import _result from 'lodash/object/result';
 
 class Character extends PIXI.extras.MovieClip {
-
-  constructor(assetKey, resourceKey, states) {
-    let gameTextures = PIXI.loader.resources[resourceKey].textures;
+  /**
+   * Character Constructor
+   * @param {String} spriteId The leading id of this Character's resources in the spritesheet
+   * @param {String} spritesheet The object property to ask PIXI's resource loader for
+   * @param {{name:String, animationSpeed:Number}[]} states The states that can be found in the spritesheet for the
+   *   given sprite id.
+   */
+  constructor(spriteId, spritesheet, states) {
+    let gameTextures = PIXI.loader.resources[spritesheet].textures;
     for (let textureKey in gameTextures) {
-      if (!gameTextures.hasOwnProperty(textureKey) || textureKey.indexOf(assetKey) === -1) {
+      if (!gameTextures.hasOwnProperty(textureKey) || textureKey.indexOf(spriteId) === -1) {
         continue;
       }
 
       let parts = textureKey.split('/');
       parts.length -= 1; //truncate to remove media file
 
-      let state = parts.join('/').replace(assetKey + '/', '');
+      let state = parts.join('/').replace(spriteId + '/', '');
 
       // Only add textures if the state is supported by the class
       let stateObj = _find(states, {name: state});
@@ -35,26 +42,77 @@ class Character extends PIXI.extras.MovieClip {
       }
     }
 
-    // Give the MovieClip a default state
     super(states[0].textures);
     this.states = states;
     this.animationSpeed = this.states[0].animationSpeed;
+    this.timeline = new TimelineLight({
+      autoRemoveChildren:true
+    });
+    return this;
+  }
+
+  /**
+   * stopAndClearTimeline
+   * Helper method that stops any existing animation where it is, and removes all other animations
+   * that are scheduled to run in the Character's timeline.
+   * @returns {Character}
+   */
+  stopAndClearTimeline() {
+    this.timeline.pause();
+    let timelineItem = this.timeline.getChildren();
+    for (let i = 0; i < timelineItem.length; i++) {
+      timelineItem[i].kill();
+    }
+    this.timeline.play();
+    return this;
+  }
+
+  /**
+   * isActive
+   * Helper method that determines whether the Character's timeline is active
+   * @returns {Boolean}
+   */
+  isActive() {
+    return this.timeline.isActive();
+  }
+
+  /**
+   * addToTimeline
+   * Adds any valid item to the timeline, typically this will be a function or a tween
+   * @param {Function|PIXI.Tween} item
+   * @returns {Character}
+   */
+  addToTimeline(item) {
+    this.timeline.add(item);
     return this;
   }
 
-  setState(state) {
-    let stateObj = _find(this.states, {name: state});
+  /**
+   * state - setter
+   * Helper method that sets the state on the character and adjusts the object's texture if possible
+   * @param {String} value Name of the state to set on the character which should match a texture
+   *   specified in the spritesheet
+   * @throws {Error} In order for a state to be set, a texture must be specified in the spritesheet
+   */
+  set state(value) {
+    let stateObj = _find(this.states, {name: value});
     if (!stateObj) {
-      return;
+      throw new Error('The requested state (' + state + ') is not availble for this Character.');
     }
+    this.stateVal = value;
     this._textures = stateObj.textures;
     this.animationSpeed = stateObj.animationSpeed;
     this.loop = stateObj.hasOwnProperty('loop') ? stateObj.loop : true;
     this.play();
   }
 
-  setPosition(x, y) {
-    this.position.set(x, y);
+  /**
+   * state - get
+   * Helper methods that returns the existin
+   * @returns {String}
+   */
+  get state() {
+    return this.stateVal ? this.stateVal : '';
   }
 
 }