Lightweight libraries prepared for js13kGames game jam
Switch branches/tags
Nothing to show
Clone or download
Latest commit 4115a14 May 31, 2017
Permalink
Failed to load latest commit information.
lib Update master volume control with getter/setter May 5, 2017
LICENSE Initial commit Aug 2, 2016
README.md Update README.md May 31, 2017

README.md

JS.13kGames

Lightweight libraries prepared for js13kGames JavaScript coding competition.

TweenFX.js - basic tweener for styles and transforms in 900 bytes

SoundFX.js - sound controller with 9 predefined sound effects in 750 bytes

TypeFX.js - pixel font with a full glyph set (10x5px size) in 1250 bytes

Visit the compo web page: http://js13kgames.com/ or follow these twitter tags: #js13k ; #js13kgames

For updates follow me on Twitter: @FoumartGames

Demos:

http://www.foumartgames.com/dev/js13kGames/js_libraries/

SoundFX Generator:

http://www.foumartgames.com/dev/js13kGames/js_libraries/SoundFXGenerator/


TweenFX

Basic DOM element style tweener.

Check TweenFX in action: http://www.foumartgames.com/dev/js13kGames/js_libraries/TweenFX/

Global Methods:

TweenFX.to(element, duration, object, callback, arguments)

Example:

TweenFX.to(element, 10, {x:100, y:100});

Callback Example:

TweenFX.to(element, 10, {x:100, y:100}, onComplete, element);

Example of performing two consecutive tweens with a callback:

TweenFX.to(element, 10, {x:100, y:100}, TweenFX.to, element, 10, {x:0, y:0});

TweenFX.pause

Toggle pause ON / OFF:

TweenFX.pause();

Set pause to ON:

TweenFX.pause(true);

Set pause to OFF (unpause):

TweenFX.pause(false);

Simply gets the pause value

TweenFX.pause(null);

TweenFX.stop

Stop the tweens of an element:

TweenFX.stop(element);

Stop all tweens currently in progress:

TweenFX.stop();

TweenFX.getValue

Extracts the "left" property floating number from an element's style:

TweenFX.getValue(element, "left");	

TweenFX.getTransform

Extracts the "rotate" property angle degrees from an element's transform:

TweenFX.getTransform(element, "rotate");

Get an object populated with scaleX, scaleY and rotate

TweenFX.getTransform(element);

Tweenable styles:

  • {opacity} - num - tweens style.opacity, also recognized as {alpha}
  • {left} - px - tweens style.left, also recognized as {x}
  • {top} - px - tweens style.top, also recognized as {y}
  • {right} - px - tweens style.right
  • {bottom} - px - tweens style.bottom
  • {width} - px - tweens style.width
  • {height} - px - tweens style.height

Tweenable transform properties:

  • {scale} - num - tweens style.transform(scaleX, scaleY);
  • {scaleX} - num - tweens style.transform(scaleX);
  • {scaleY} - num - tweens style.transform(scaleY);
  • {rotate} - deg - tweens style.transform(rotate), also recognized as {rotation}

SoundFX

Basic sound effect controller utilizing the Web Audio API (AudioContext's Oscillator and Gain)

Check SoundFX in action: http://www.foumartgames.com/dev/js13kGames/js_libraries/SoundFX/

JSFiddle: https://jsfiddle.net/Foumart/1bdk8ks2/

Global Methods:

SoundFX.playSound(startFrequency, frequencyChange, delay, repeat, volume, type)

type:

  • Square
  • Sawtooth
  • Triangle
  • Sine

built in sounds:

  • SoundFX.jump()
  • SoundFX.pew()
  • SoundFX.zap()
  • SoundFX.bounce()
  • SoundFX.stuck()
  • SoundFX.explosion()
  • SoundFX.blow()
  • SoundFX.shot()
  • SoundFX.coin()

SoundFX.setVolume(_volume:Number)

Set the master volume to the number provided (float:0-1)

SoundFX.getVolume()

Get the master volume

Web Audio API reference: https://www.w3.org/TR/webaudio/


TypeFX

Lightweight Font < 1.5kb - uses canvas to draw glyphs

Global Methods:

TypeFX.drawText(element, text, size, leading, color)

Example:

var text = "This is a test string\rWith line break.";
var element = document.createElement("div");
document.body.appendChild(element);
TypeFX.drawText(element, text, 5);

TypeFX.drawDiggit(element, charCode or a glyph string, size, color)