// --- Art ---
p.addArtAssets(
["art", "aa/barn.png"]
, ["speech", "aa/speech.png"]
);
// --- Layers ---
p.addLayers(
"art",
"speech",
"css-border"
);
// --- Sequence ---
// [1]
p.step.create(
{a: "art", l: "art"},
{a: "speech", l:"speech", s: 'after', d: 1000, u: 500 });
// --- Dest ---
p.destination = { main: "[[->ab]]" }
<%
$(function(){
window.passage.panelize(function(p) {
// --- Art ---
p.addArtAssets(
["face", "ab/face.png"]
, ["stars", "ab/stars (color).png"]
, ["blush", "ab/blush.png"]
, ["eye-0", "ab/eyes-0.png"]
, ["eye-1", "ab/eyes-1.png"]
, ["eye-2", "ab/eyes-2.png"]
, ["sp-1", "ab/speech-1.png"]
, ["sp-2", "ab/speech-2.png"]
);
// --- Layers ---
p.addLayers(
"bg",
"face",
"eye",
"speech",
"css-border"
);
// --- Sequence ---
// [1]
p.step.create(
{a: "face", l: "face", u: 500},
{a:"eye-0", l:"eye", u: 600});
p.step.create(
{a:"eye-1", l:"eye", p: 'replace', u: 300},
{a:"blush", l:"bg", u: 300},
{a:"stars", l:"bg", u: 500},
{a:"sp-1", l:"speech", u: 500}
);
p.step.create(
{a:"eye-2", l:"eye", p: 'replace', u: 300},
{a:"sp-2", l:"speech", d: 200, u: 500}
);
// --- Dest ---
p.destination = { main: "[[->ac]]" }
});
});
%>
<%
$(function(){
window.passage.panelize(function(p) {
// --- Art ---
p.addArtAssets(
["barn", "ac/barn.png"]
, ["guy-1", "ac/guy-1.png"]
, ["guy-2", "ac/guy-2.png"]
, ["guy-3", "ac/guy-3.png"]
);
// --- Layers ---
p.addLayers(
"barn",
"guy",
"css-border"
);
// --- Sequence ---
// [1]
p.step.create(
{a: "barn", l: "barn", u:200},
{a:"guy-1", l:"guy", d: 200, u: 200});
p.step.create({a:"guy-2", l:"guy", u: 200});
p.step.create({a:"guy-3", l:"guy", u: 200});
// --- Dest ---
p.destination = { main: "[[->ba]]" }
});
});
%>
<%
$(function(){
window.passage.panelize(function(p) {
// --- Art ---
p.addArtAssets(
["barn", "ba/barn.png"]
, ["guy", "ba/guy.png"]
, ["speech", "ba/speech.png"]
);
// --- Layers ---
p.addLayers(
"art",
"css-border"
);
// --- Sequence ---
// [1]
p.step.create(
{a: "barn", l: "art", u: 200},
{a:"guy", l:"art", d: 600, u: 200},
{a:"speech", l:"art", u: 500});
// --- Dest ---
p.destination = { main: "[[->bb]]" }
});
});
%>
<%
$(function(){
window.passage.panelize(function(p) {
// --- Art ---
p.addArtAssets(
["face", "bb/face.png"],
["speech", "bb/speech.png"],
["exp-1", "bb/expression-1.png"],
["exp-2", "bb/expression-2.png"]
);
// --- Layers ---
p.addLayers(
"exp",
"top",
"css-border"
);
// --- Sequence ---
// [1]
/*p.step.create(
{a: "face", l: "top", u: 200},
{a: "exp-1", l: "exp", u: 200},
{a: "exp-2", l: "exp", p: 'replace', d:1000, u: 500},
{a: "speech", l: "top", d: 1000, u: 1000});*/
p.step.create(
{a: "face", l: "top", u: 200},
{a: "exp-1", l: "exp", u: 200});
/*p.step.create(
{a: "exp-2", l: "exp", p: 'replace', u: 500},
{a: "speech", l: "top", d: 1000, u: 1000});*/
p.step.create(
{a: "exp-2", l: "exp", p: 'replace', u: 0},
{a: "speech", l: "top", u: 0});
// --- Dest ---
p.destination = { main: "[[->bc]]" }
});
});
%>
<%
$(function(){
window.passage.panelize(function(p) {
// --- Art ---
p.addArtAssets(
["bg", "bc/bg.png"]
, ["guy", "bc/guy.png"]
, ["speech", "bc/speech.png"]
, ["smackhand", "bc/smackhand.png"]
, ["surpriseanimal", "bc/surpriseanimal.png"]
);
// --- Layers ---
p.addLayers(
"bg",
"fg",
"css-border"
);
// --- Sequence ---
// [1]
p.step.create(
{a: "bg", l: "bg"},
{a:"guy", l:"fg", d: 500, u: 300},
{a:"speech", l:"fg", d: 100, u: 500},
{a:"smackhand", l:"fg", d: 1800, u: 100},
{a:"surpriseanimal", l:"fg", d: 300, u: 200});
// --- Dest ---
p.destination = { main: "[[->animal]]" }
});
});
%>
var animalRecords, animalAssets, i, path;
path = "ca/animal";
animalAssets = [];
for(i = 1; i <= 28; i++) {
animalAssets.push({
name: ("animal"+i),
type: "asset",
src: path+i+".png" });
}
// --- Art ---
p.addArtAssets(
["guy", "ca/guy.png"]
, ["hand", "ca/hand.png"]
, ["sp-2", "ca/speech-2.png"]
);
_(animalAssets).each(function(asset){
p.addArtAssets(asset);
});
// --- Layers ---
p.addLayers(
"art-flex",
"character",
"speech"
);
// --- Sequence ---
// [animals]
p.step.create({a: "guy", l: "character", u: 250}, {a: "hand", l: "speech", u: 250});
p.step.create({a: "hand", p: "remove", l: "speech", u: 250}, {a: "sp-2", l: "speech", u: 250});
_(animalAssets).each(function(asset) {
p.step.create({a: asset.name, l: 'art-flex'});
});
// --- Dest ---
p.destination = { main: "[[->end]]" }
<% window.story.show("header"); %>
<% window.story.show("aa"); %>
p.addArtAssets(
["frame", "end/frame.png"]
, ["bg-barn","end/bg-barn.png"]
, ["bg-barn-color","end/bg-barn dark.png"]
, ["bg-barn-light","end/bg-barn light.png"]
, ["body-1","end/body-1.png"]
, ["body-2","end/body-2.png"]
, ["hand-a","end/hand-a.png"]
, ["hand-b","end/hand-b.png"]
, ["hand-c1","end/hand-c1.png"]
, ["hand-c2","end/hand-c2.png"]
, ["sp-1","end/sp-1.png"]
, ["sp-2","end/sp-2.png"]
, ["sp-3","end/sp-3.png"]
, ["sp-4","end/sp-4.png"]
, ["sp-5","end/sp-5.png"]
, ["sp-6","end/sp-6.png"]
, ["sp-7","end/sp-7.png"]
, ["sp-8","end/sp-8.png"]
, ["b2-h1","end/b2-h1.png"]
, ["b2-h2","end/b2-h2.png"]
, ["b2-h3","end/b2-h3.png"]
, ["end","end/end.png"]
, ["kathunk","end/kathunk.png"]
, ["barndoor","end/barndoor.png"]
);
// --- Layers ---
p.addLayers(
"body",
"limb",
"barnshade",
"barnline",
"speech",
"frame"
);
// --- Sequence ---
// [1]
p.step.create(
{a: 'frame', l: 'frame'}
, {a: 'body-1', l: 'body'}
, {a: 'hand-a', l: 'limb'}
, {a: 'sp-1', l: 'speech', u: 300}
);
p.step.create(
{a: 'hand-b', l: 'limb', p: 'replace'}
, {a: 'sp-2', l: 'speech', u: 300}
);
p.step.create(
{a: 'sp-3', l: 'speech', u: 300}
, {a: 'hand-c1', l: 'limb', p: 'replace', s: 'after', u: 200}
, {a: 'hand-c2', l: 'limb', p: 'replace', d: 400, u: 400}
);
// [2]
p.step.create(
{a: 'body-2', l: 'body', p: 'replace', d: 500, u: 500}
, {a: 'b2-h1', l: 'limb', p: 'replace', u: 500}
, {a: 'sp-4', l: 'speech', d: 300, u: 500}
, {a: 'bg-barn', l: 'barnline', s: 'async', d: 600, u: 5000}
, {a: 'bg-barn-color', l: 'barnshade', s: 'async', d: 600, u: 5000}
, {a: 'bg-barn-light', l: 'barnshade', s: 'async', d: 600, u: 5000}
);
p.step.create(
{a: 'b2-h2', l: 'limb', p: 'replace'}
, {a: 'sp-5', l: 'speech'}
);
p.step.create(
{a: 'b2-h3', l: 'limb', p: 'replace'}
, {a: 'sp-6', l: 'speech'}
);
p.step.create(
{a: 'sp-7', l: 'speech'}
);
p.step.create(
{a: 'sp-8',l: 'speech'}
);
// ka chunk, end, not done
p.step.create(
{a: 'barndoor', l: 'barnline', d: 500}
, {a: 'bg-barn-light', l: 'barnshade', p: 'remove'}
, {l: 'speech', p: 'remove'}
, {l: 'body', p: 'remove'}
, {l: 'limb', p: 'remove'}
, {a: 'kathunk', l: 'speech'}
, {a: 'kathunk', l: 'speech', p: 'remove', d: 900, u: 1400}
, {a: 'end', l: 'speech', d: 2500, u: 1000}
);
p.destination.main = "[[footnote]]";
// --- Art ---
p.addArtAssets(
["header", "header.png"]
);
// --- Layers ---
p.addLayers(
"art"
);
// --- Sequence ---
p.step.create({a: "header", l: "art", u: 1000});
// --- Dest ---
p.destination = { main: "[[->aa]]" }
Good Barn Bad Animal was written and drawn by Derek Timm-Brock and built in Twine using the Jinx interactive comics engine. Learn more about Jinx and see other interactive comics at www.wizard.town.
[[play again->Start]]