EVR.Sound.Controls.Button.Volume.Deamplify = function(container)
{
   EVR.Sound.Controls.Button.Volume.call(
      this, container, ALIGN_LEFT, SOUND_DEAMPLIFY_ICON);
   this.set_attributes();
   this.append();
}
EVR.Sound.Controls.Button.Volume.Deamplify.prototype = 
   new EVR.Sound.Controls.Button.Volume;
EVR.Sound.Controls.Button.Volume.Deamplify.prototype.respond = function()
{
   this.audio.decrease_volume();
   EVR.Sound.Controls.Button.Volume.prototype.respond.call(this);
}
EVR.Sound.Controls.Button.Volume.Deamplify.prototype.update = function()
{
   if (this.audio.volume <= 0)
   {
      this.focused_opacity = this.unfocused_opacity;
   }
   else
   {
      this.focused_opacity = SOUND_CONTROLS_FOUCUSED_OPACITY;
   }
   this.set_opacity();
}
EVR.Sound.Controls.Button.Volume.Deamplify.prototype.toString = function()
{
   return "[object EVR.Sound.Controls.Button.Volume.Deamplify]";
}
EVR.include("sound/controls/button/volume/Amplify.js");
EVR.include("sound/controls/button/volume/Deamplify.js");
EVR.Sound.Controls.Button.Volume = function(container, alignment, icon)
{
   EVR.Sound.Controls.Button.call(this, container, alignment);
   this.icon = icon;
   this.disable_selection();
}
EVR.Sound.Controls.Button.Volume.prototype = new EVR.Sound.Controls.Button;
EVR.Sound.Controls.Button.Volume.prototype.disable_selection = function()
{
   if (!!this.element)
   {
      var element = this.element;
      element.onselectstart = function() { return false };
      element.onmousedown = function() { return false };
   }
}
EVR.Sound.Controls.Button.Volume.prototype.set_attributes = function()
{
   this.set_color(SOUND_BUTTON_BACKGROUND);
   this.set_proportions(SOUND_BUTTON_WIDTH, SOUND_BUTTON_HEIGHT);
   this.set_text();
   this.css.cursor = "default";
}
EVR.Sound.Controls.Button.Volume.prototype.set_text = function()
{
   var font = SOUND_CONTROLS_FONT_FAMILY;
   var color = SOUND_CONTROLS_FONT_COLOR;
   var size = SOUND_CONTROLS_FONT_SIZE;
   EVR.Sound.Controls.Button.prototype.set_text.call(
      this, this.icon, font, color, size);
}
EVR.Sound.Controls.Button.Volume.prototype.toString = function()
{
   return "[object EVR.Sound.Controls.Button.Volume]";
}
EVR.Sound.Controls.Button.Volume.Amplify = function(container)
{
   EVR.Sound.Controls.Button.Volume.call(
      this, container, ALIGN_RIGHT, SOUND_AMPLIFY_ICON);
   this.set_attributes();
   this.append();
}
EVR.Sound.Controls.Button.Volume.Amplify.prototype = 
   new EVR.Sound.Controls.Button.Volume;
EVR.Sound.Controls.Button.Volume.Amplify.prototype.respond = function()
{
   this.audio.increase_volume();
   EVR.Sound.Controls.Button.Volume.prototype.respond.call(this);
}
EVR.Sound.Controls.Button.Volume.Amplify.prototype.update = function()
{
   if (this.audio.volume >= 1)
   {
      this.focused_opacity = this.unfocused_opacity;
   }
   else
   {
      this.focused_opacity = SOUND_CONTROLS_FOUCUSED_OPACITY;
   }
   this.set_opacity();
}
EVR.Sound.Controls.Button.Volume.Amplify.prototype.toString = function()
{
   return "[object EVR.Sound.Controls.Button.Volume.Amplify]";
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>-</title>
    <style type="text/css">
      img
      {
        width: 480px;
        margin: 30px;
      }
    </style>
  </head>

  <body>
    <?php
      foreach (glob("*.png") as $ii => $file)
      {
         echo "\t<img src=\"$file\" alt=\"$ii\" />\n";
      }
    ?>
  </body>

</html>
var HEIGHT_RATIO = .375;
var STRIPE_HEIGHT = .7;
var STRIPE_PALETTE = ["#AA8ADE", "#916D10", "#F88C37"];
var STRIPE_DURATION = 420;
var CRAWL_STEP = .02;
var CRAWL_FRAME_DURATION = 150;
var DINING_HEIGHT = .2;
var TITLE_MIN_HEIGHT = 100;
var GLYPH_HEIGHT = .2;
var GLYPH_WIDTH = .008;
var GLYPH_LETTER_RATIO = .5;
var GLYPH_SHADOW_OFFSET = .75;
var TITLE_PALETTE = ["#d00000", "#b0b0b0", "#0000d0"];
var TITLE_FLASH_FRAME_DURATION = 880;
var TITLE_SHADOW_BRIGHTNESS = 60;
var TITLE_TEXT_BRIGHTNESS = 45;

BH = function()
{
    this.stripes_palette = STRIPE_PALETTE;
    this.stripes_shift = false;
    this.title_palette = TITLE_PALETTE;
    this.title_center_index = 0;
    this.setEventHandlers();
    this.setChildren();
    this.convertTitle();
    this.arrange();
    this.startFlash();
    this.startCrawl();
    this.startTitleFlash();
}

BH.prototype.setEventHandlers = function()
{
    var current = this;
    window.onresize = function() { current.arrange() };
}

BH.prototype.setChildren = function()
{
    this.harvester = document.getElementById("harvester");
    this.cabinet = document.getElementById("cabinet");
    this.feeder = document.getElementById("feeder");
    this.menu = document.getElementById("menu");
    this.blueprint = document.getElementById("blueprint");
    this.stripes = document.getElementById("stripes");
    this.crawl_right = document.getElementById("crawl-right");
    this.crawl_left = document.getElementById("crawl-left");
    this.dining = document.getElementById("dining");
    this.marquee = document.getElementById("marquee");
    this.title = document.getElementById("title");
}

BH.prototype.convertTitle = function()
{
    var title = this.title;
    var text = title.innerHTML;
    title.innerHTML = "";
    var ch, glyph;
    for (var ii = 0; ii < text.length; ii++)
    {
	ch = text.charAt(ii);
	if (ch != " " && ch != "\n" && ch != "\t")
	{
	    foreground = document.createElement("span");
	    foreground.className = "foreground";
	    foreground.style.zIndex = 1;
	    title.appendChild(foreground);
	    background = document.createElement("span");
	    background.innerHTML = ch;
	    background.className = "background";
	    background.style.zIndex = 0;
	    title.appendChild(background);
	}
    }
    this.glyphs = title.getElementsByTagName("span");
}

BH.prototype.arrange = function()
{
    this.clearStripes();
    var harvester = this.harvester;
    var harvester_w = harvester.clientWidth;
    var height = this.formatPx(harvester_w * HEIGHT_RATIO);
    harvester.style.height = height;
    var cabinet = this.cabinet;
    var feeder = this.feeder;
    var menu = this.menu;
    cabinet.style.height = height;
    feeder.style.height = height;
    menu.style.height = height;
    var cabinet_w = cabinet.clientWidth;
    feeder.style.width = this.formatPx(harvester_w - cabinet_w - menu.clientWidth);
    feeder.style.left = this.formatPx(cabinet_w);
    cabinet.getElementsByTagName("img")[0].height = cabinet.clientHeight;
    menu.getElementsByTagName("img")[0].height = menu.clientHeight;
    var win_h = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight;
    var marquee = this.marquee;
    this.arrangeFeeder();
    this.arrangeTitle();
    this.addStripes();
}

BH.prototype.arrangeFeeder = function()
{
    var feeder = this.feeder;
    var images = feeder.getElementsByTagName("img");
    var range = feeder.clientHeight;
    var y, image;
    for (var ii = 0; ii < images.length; ii++)
    {
	image = images[ii];
	image.style.top = this.formatPx(parseInt((range - image.clientHeight) / 2));
	if (image.id == "crawl-left")
	{
	    var length = image.clientWidth;
	    image.style.left = this.formatPx(-length);
	    this.crawl_length = length;
	    this.crawl_step = parseInt(CRAWL_STEP * length);
	}
	else
	{
	    image.style.left = this.formatPx(0);
	}
    }
}

BH.prototype.arrangeTitle = function()
{
    var title = this.title;
    var range_x = title.clientWidth;
    var width = parseInt(GLYPH_WIDTH * range_x);
    this.resizeTitle();
    var range_y = title.clientHeight;
    var height = parseInt(GLYPH_HEIGHT * range_y);
    var shadow_offset = parseInt(GLYPH_SHADOW_OFFSET * width);
    var y = parseInt((range_y - height) / 2 - shadow_offset / 2);
    var glyphs = this.glyphs;
    title.style.fontSize = this.formatPx(GLYPH_LETTER_RATIO * height);
    var glyph_count = glyphs.length / 2;
    var width_all = width * glyph_count;
    var margin = (range_x - width_all) / (glyph_count + 1);
    var x = margin;
    var foreground, background, color;
    for (var ii = 0; ii < glyphs.length; ii += 2)
    {
	foreground = glyphs[ii];
	background = glyphs[ii + 1];
	foreground.style.height = this.formatPx(height);
	background.style.height = this.formatPx(height);
	foreground.style.lineHeight = this.formatPx(height);
	background.style.lineHeight = this.formatPx(height);
	foreground.style.top = this.formatPx(y);
	background.style.top = this.formatPx(y + shadow_offset);
	foreground.style.width = this.formatPx(width);
	background.style.width = this.formatPx(width);
	foreground.style.left = this.formatPx(x);
	background.style.left = this.formatPx(x - shadow_offset);
	x += margin + width;
    }
}

BH.prototype.resizeTitle = function()
{
    var title = this.title;
    var available = this.getWindowHeight() - this.marquee.offsetHeight - this.harvester.offsetHeight;
    var min_height = TITLE_MIN_HEIGHT;
    if (available > min_height)
    {
	title.style.height = this.formatPx(available);
    }
    else
    {
	title.style.height = this.formatPx(min_height);
    }
}

BH.prototype.getWindowHeight = function()
{
    if (typeof(window.innerHeight) != "undefined")
    {
	return window.innerHeight;
    }
    return document.documentElement.clientHeight;
}

BH.prototype.clearStripes = function()
{
    var stripes = this.stripes;
    while (stripes.firstChild)
    {
	stripes.removeChild(stripes.firstChild);
    }
}

BH.prototype.formatPx = function(measurement)
{
    return parseInt(measurement) + "px";
}

BH.prototype.addStripes = function()
{
    this.clearStripes();
    var stripes = this.stripes;
    var bound = this.cabinet.clientHeight;
    var height = parseInt(bound * STRIPE_HEIGHT);
    var sum = 0;
    var stripe;
    while (sum < bound)
    {
	stripe = document.createElement("div");
	stripe.innerHTML = "&nbsp;";
	stripe.style.height = this.formatPx(height);
	stripes.appendChild(stripe);
	sum += height;
    }
}

BH.prototype.startFlash = function()
{
    var current = this;
    window.setInterval(
	function() {
	    current.setStripeColors();
	}, STRIPE_DURATION);
}

BH.prototype.setStripeColors = function()
{
    var stripes = this.stripes.getElementsByTagName("div");
    var palette = this.stripes_palette;
    var palette_ii = this.stripes_shift;
    var color;
    for (var ii = 0; ii < stripes.length; ii++)
    {
	color = palette[palette_ii % palette.length];
	stripes[ii].style.background = color;
	palette_ii++;
    }
    this.stripes_shift = !this.stripes_shift;
}

BH.prototype.startCrawl = function()
{
    var current = this;
    window.setInterval(
	function() {
	    current.crawl();
	}, CRAWL_FRAME_DURATION);
}

BH.prototype.crawl = function()
{
    var right = this.crawl_right;
    var left = this.crawl_left;
    var length = this.crawl_length;
    var step = this.crawl_step;
    var right_x = parseInt(right.style.left) + step;
    var left_x = parseInt(left.style.left) + step;
    if (right_x >= length)
    {
	right_x = 0;
	left_x = -length;
    }
    right.style.left = this.formatPx(right_x);
    left.style.left = this.formatPx(left_x);
}

BH.prototype.startTitleFlash = function()
{
    var current = this;
    window.setInterval(
	function() {
	    current.flashTitle();
	}, TITLE_FLASH_FRAME_DURATION);
}

BH.prototype.flashTitle = function()
{
    var glyphs = this.glyphs;
    var glyph_count = glyphs.length / 2;
    var start = parseInt(glyph_count / 2) - 1;
    var center = start + 1;
    var palette = this.title_palette;
    var palette_ii = this.incrementIndex(this.title_center_index, palette);
    this.title_center_index = palette_ii;
    var color, shadow, text_color;
    for (var ii = 0; ii <= start; ii++)
    {
	color = new Color(palette[palette_ii]);
	shadow = new Color(color.getString());
	text_color = new Color(color.getString());
	shadow.changeBrightness(TITLE_SHADOW_BRIGHTNESS);
	text_color.changeBrightness(TITLE_TEXT_BRIGHTNESS);
	glyphs[ii * 2].style.backgroundColor = color.getString();
	glyphs[ii * 2 + 1].style.backgroundColor = shadow.getString();
	glyphs[ii * 2 + 1].style.color = text_color.getString();
	glyphs[(glyph_count - ii - 1) * 2].style.backgroundColor = color.getString();
	glyphs[(glyph_count - ii - 1) * 2 + 1].style.backgroundColor = shadow.getString();
	glyphs[(glyph_count - ii - 1) * 2 + 1].style.color = text_color.getString();
	palette_ii = this.incrementIndex(palette_ii, palette);
    }
    color = new Color(palette[palette_ii]);
    shadow = new Color(color.getString());
    text_color = new Color(color.getString());
    shadow.changeBrightness(TITLE_SHADOW_BRIGHTNESS);
    text_color.changeBrightness(TITLE_TEXT_BRIGHTNESS);
    glyphs[center * 2].style.backgroundColor = color.getString();
    glyphs[center * 2 + 1].style.backgroundColor = shadow.getString();
    glyphs[center * 2 + 1].style.color = text_color.getString();
    palette_ii = this.incrementIndex(palette_ii, palette);
}

BH.prototype.incrementIndex = function(index, list)
{
    index += 1;
    if (index >= list.length)
    {
	index = 0;
    }
    return index;
}

window.onload = function() { new BH() };
216.73.216.213
216.73.216.213
216.73.216.213
 
May 17, 2018

Line Wobbler Advance is a demake of Line Wobbler for Game Boy Advance that started as a demo for Synchrony. It contains remakes of the original Line Wobbler levels and adds a challenging advance mode with levels made by various designers.


f1. Wobble at home or on-the-go with Line Wobbler Advance

This project was originally meant to be a port of Line Wobbler and kind of a joke (demaking a game made for even lower level hardware), but once the original levels were complete, a few elements were added, including a timer, different line styles and new core mechanics, such as reactive A.I.


f2. Notes on Line Wobbler

I reverse engineered the game by mapping the LED strip on paper and taking notes on each level. Many elements of the game are perfectly translated, such as enemy and lava positions and speeds and the sizes of the streams. The boss spawns enemies at precisely the same rate in both versions. Thanks in part to this effort, Line Wobbler Advance was awarded first prize in the Wild category at Synchrony.


f3. First prize at Synchrony

Advance mode is a series of levels by different designers implementing their visions of the Line Wobbler universe. This is the part of the game that got the most attention. It turned into a twitchy gauntlet filled with variations on the core mechanics, cinematic interludes and new elements, such as enemies that react to the character's movements. Most of the levels are much harder than the originals and require a lot of retries.

Thanks Robin Baumgarten for giving permission to make custom levels and share this project, and thanks to the advance mode designers Prashast Thapan, Charles Huang, John Rhee, Lillyan Ling, GJ Lee, Emily Koonce, Yuxin Gao, Brian Chung, Paloma Dawkins, Gus Boehling, Dennis Carr, Shuichi Aizawa, Blake Andrews and mushbuh!

DOWNLOAD ROM
You will need an emulator to play. Try Mednafen (Windows/Linux) or Boycott Advance (OS X)