hhhhhh

TODO.md

@@ -12,4 +12,5 @@ MINOR SHTUFF
 
 - Word box class less annoying
 - Refactoring, ugh
-- Draw: Pavlov, TF2T, Random
+- Draw: Pavlov, TF2T, Random
+- a better handwritten font, with REAL bold & italics???

assets/tournament_peep.json

@@ -0,0 +1,75 @@
+{"frames": {
+
+"tournament_peep0000":
+{
+	"frame": {"x":10,"y":10,"w":79,"h":140},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":79,"h":140},
+	"sourceSize": {"w":79,"h":140}
+},
+"tournament_peep0001":
+{
+	"frame": {"x":99,"y":10,"w":79,"h":140},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":79,"h":140},
+	"sourceSize": {"w":79,"h":140}
+},
+"tournament_peep0002":
+{
+	"frame": {"x":188,"y":10,"w":79,"h":140},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":79,"h":140},
+	"sourceSize": {"w":79,"h":140}
+},
+"tournament_peep0003":
+{
+	"frame": {"x":277,"y":10,"w":79,"h":140},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":79,"h":140},
+	"sourceSize": {"w":79,"h":140}
+},
+"tournament_peep0004":
+{
+	"frame": {"x":366,"y":10,"w":79,"h":140},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":79,"h":140},
+	"sourceSize": {"w":79,"h":140}
+},
+"tournament_peep0005":
+{
+	"frame": {"x":10,"y":160,"w":79,"h":140},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":79,"h":140},
+	"sourceSize": {"w":79,"h":140}
+},
+"tournament_peep0006":
+{
+	"frame": {"x":99,"y":160,"w":79,"h":140},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":79,"h":140},
+	"sourceSize": {"w":79,"h":140}
+},
+"tournament_peep0007":
+{
+	"frame": {"x":188,"y":160,"w":79,"h":140},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":79,"h":140},
+	"sourceSize": {"w":79,"h":140}
+}},
+"meta": {
+	"app": "Adobe Animate",
+	"version": "15.2.0.66",
+	"image": "tournament_peep.png",
+	"format": "RGBA8888",
+	"size": {"w":512,"h":512},
+	"scale": "1"
+}
+}

index.html

@@ -25,6 +25,7 @@
 <script>Ticker.framerate=60;</script>
 
 <!-- Core Engine -->
+<script src="js/core/Loader.js"></script>
 <script src="js/core/Slideshow.js"></script>
 <script src="js/core/SlideSelect.js"></script>
 <script src="js/core/Button.js"></script>
@@ -44,7 +45,10 @@
 var slideshow, slideSelect;
 window.onload = function(){
 
-	Words.convert("lang/en.html").then(function(){
+	Q.all([
+		Loader.loadAssets(Loader.manifest),
+		Words.convert("lang/en.html")
+	]).then(function(){
 
 		// Slideshow
 		slideshow = new Slideshow({

js/core/Loader.js

@@ -0,0 +1,113 @@
+window.Loader = {};
+
+Loader.manifest = {};
+Loader.manifestPreload = {}; // For Preloader
+Loader.sounds = {};
+
+/***************
+
+Actually LOAD all the assets in a manifest. Like so:
+
+Loader.loadAssets(Loader.manifest, function(){
+	Loader.sceneManager.gotoScene(Loader.START_SCENE);
+	Loader.startUpdateAndDraw();
+});
+
+***************/
+Loader.loadAssets = function(manifest, completeCallback, progressCallback){
+
+	var deferred = Q.defer();
+	completeCallback = completeCallback || function(){};
+	progressCallback = progressCallback || function(){};
+
+	// ABSOLUTE NUMBER OF ASSETS!
+	var _isLoadingImages = 0;
+	var _isLoadingSounds = 0;
+	var _totalAssetsLoaded = 0;
+	var _totalAssetsToLoad = 0;
+	for(var key in manifest){
+		var src = manifest[key];
+
+		// Loading sounds or images?
+		if(src.slice(-4)==".mp3") _isLoadingSounds=1;
+		else _isLoadingImages=1;
+
+		// Loading sprite or image?
+		if(src.slice(-5)==".json") _totalAssetsToLoad+=2; // Is Sprite. Actually TWO assets.
+		else _totalAssetsToLoad+=1;
+
+	}
+
+	// When you load an asset
+	var _onAssetLoad = function(){
+		_totalAssetsLoaded++;
+		if(progressCallback){
+			progressCallback(_totalAssetsLoaded/_totalAssetsToLoad); // Callback PROGRESS
+		}
+	};
+
+	// When you load a group
+	var _groupsToLoad = _isLoadingImages + _isLoadingSounds;
+	var _onGroupLoaded = function(){
+		_groupsToLoad--;
+		if(_groupsToLoad==0){
+			completeCallback(); // DONE.
+			deferred.resolve();
+		}
+	};
+
+	// HOWLER - Loading Sounds
+	var _soundsToLoad = 0;
+	var _onSoundLoad = function(){
+		_soundsToLoad--;
+		_onAssetLoad();
+		if(_soundsToLoad==0) _onGroupLoaded();
+	};
+
+	// PIXI - Loading Images & Sprites (or pass it to Howler)
+	var loader = PIXI.loader;
+	var resources = PIXI.loader.resources;
+	for(var key in manifest){
+
+		var src = manifest[key];
+
+		// Is MP3. Leave it to Howler.
+		if(src.slice(-4)==".mp3"){
+			var sound = new Howl({ src:[src] });
+			_soundsToLoad++;
+			sound.once('load', _onSoundLoad);
+			Loader.sounds[key] = sound;
+			continue;
+		}
+
+		// Otherwise, is an image (or json). Leave it to PIXI.
+	    loader.add(key, src);
+
+	}
+	loader.on('progress', _onAssetLoad);
+	loader.once('complete', _onGroupLoaded);
+	loader.load();
+
+	// Promise!
+	return deferred.promise;
+
+};
+
+/***************
+
+Add assets to manifest! Like so:
+
+Loader.addToManifest(Loader.manifest,{
+	bg: "sprites/bg.png",
+	button: "sprites/button/button.json",
+	[key]: [filepath],
+	[key]: [filepath],
+	etc...
+});
+
+***************/
+Loader.addToManifest = function(manifest, keyValues){
+	for(var key in keyValues){
+		manifest[key] = keyValues[key];
+	}
+};

js/lib/helpers.js

@@ -1,3 +1,8 @@
+/**********************************
+
+RANDOM CRAP TO MAKE MY LIFE EASIER
+
+**********************************/
 
 // Pi is for unwashed plebians
 Math.TAU = 2*Math.PI;
@@ -39,4 +44,63 @@ var _removeFade = function(self, INSTANT){
 		},300);
 		return deferred.promise;
 	}
-};
+};
+
+/*******
+
+Make a Sprite. e.g:
+
+_makeSprite("bg", {width:960});
+
+*******/
+function _makeSprite(textureName, options){
+	options = options || {};
+
+	// Make Sprite
+	var sprite = new PIXI.Sprite(PIXI.loader.resources[textureName].texture);
+
+	// Options
+	if(options.width!==undefined) _scaleToWidth(sprite, options.width);
+	if(options.anchorX!==undefined) sprite.anchor.x=options.anchorX;
+	if(options.anchorY!==undefined) sprite.anchor.y=options.anchorY;
+
+	// Gimme
+	return sprite;
+}
+
+/*******
+
+Make a MovieClip. e.g:
+
+_makeSprite("button", {width:960});
+
+*******/
+function _makeMovieClip(resourceName, options){
+	options = options || {};
+
+	// Make that MovieClip!
+	var resources = PIXI.loader.resources;
+	var resource = resources[resourceName];	
+	if(!resource) throw Error("There's no MovieClip named '"+resourceName+"'!");
+	var numFrames = Object.keys(resource.data.frames).length;
+	var frames = [];
+	for(var i=0; i<numFrames; i++){
+		var str = "0000" + i; // FOUR leading zeroes
+		str = str.substr(str.length-4);
+		frames.push(PIXI.Texture.fromFrame(resourceName+str));
+	}
+	var mc = new PIXI.extras.MovieClip(frames);
+
+	// Options
+	mc.gotoAndStop(0);
+	mc.anchor.x = 0.5;
+	mc.anchor.y = 0.5;
+	if(options.width!==undefined) _scaleToWidth(mc, options.width);
+	if(options.anchorX!==undefined) mc.anchor.x=options.anchorX;
+	if(options.anchorY!==undefined) mc.anchor.y=options.anchorY;
+	if(options.scale!==undefined) mc.scale.x=mc.scale.y=options.scale;
+
+	// Gimme
+	return mc;
+
+}