Random posts

spiral's picture

Find the Worm

worm_promo.png
Game File: 

Find The Worm

a game by Nikki Bee

will you find the worm?
how many rounds can you last?
instructions inside


made for the Spring Break jam on itchio https://itch.io/jam/spring-break


credits:
text - Unifont
graphics - Clickteam
audio - Half-Life 1 computer voice, and a glitched Speak & Spell sample pack https://freesound.org/people/Glitchedtones/packs/21077/

Made For: 
An event

f u c k

f u c k    t h e      g a m e.png
Game File: 

twine game about fucking, enjoy.

Made For: 
An event
kirkjerk's picture

BEE TIME TRIALS

beetimetrials.png
Game File: 

a blatant retread of "rotatin' rocket race" but with a bee.
I actually like the weird control scheme of this one a lot.

Made For: 
Pirate Kart 2

Indoor Driving Simulator

indoor.PNG
Game File: 

PLAY THE BANNED SEQUEL THAT GRAN TURISMO AND ENTHUSIA DON'T HAVE THE GUTS TO MAKE!!!!!!!!!!!!

Made For: 
Pirate Kart 2

MOAI

Hailing from Easter Island, weighing in at 20 tons, MOAI has entered the arena of game development. When he isn't working on 2-hour videogames he can often be found working on his longer term project, also a videogame. It's unsure whether he'll finish before the world ends in 2012, but he's certainly not going to let a little thing like an apocalypse stop him.

bio_picture: 
moai.jpg
Made For: 
Pirate Kart 2
rosden's picture

4score

4score 2.PNG
Game File: 

I came up with the idea to make this and felt like I had to make it.

I personally dont know what to think of it. I feel like I need someone else to tell me what it all means like its a dream XD .

So you are a person in a circle with 4 eyes around them with numbers circling that circle.

Made For: 
An event

Twine: apply CSS to individual characters

Update: The Javascript on this page is now built into Twine 1.4! It is no longer necessary to install it.

This script causes every single character in passages to be wrapped in a <span class="char"> element. This enables a number of mildly interesting CSS effects.

Obsolete script removed: use Twine 1.4

These characters have the class of "char", and also a class equal to themselves ("a" for the letter "a", "2" for "2", etc.) It's recommended that you use the :nth-child pseudo-class to select them. Some potential CSS effects that can be performed include the following (examples only):

Horizontally spin characters on mouseover:
(works best with large text)

.char:not(.space):hover {
  transform: rotateY(1440deg);
  -webkit-transform: rotateY(1440deg);
}
.char:not(.space) {
  display: inline-block;
  transition: transform 2s ease-out;
  -webkit-transition: -webkit-transform 2s ease-out;
}

Wavy text:

 .char{ position:relative; }
.char:nth-child(8n) { top:0px; }
.char:nth-child(8n+1) { top:-1px; }
.char:nth-child(8n+2) { top:-1.5px; }
.char:nth-child(8n+3) { top:-1px; }
.char:nth-child(8n+4) { top:-0px; }
.char:nth-child(8n+5) { top: 1px; }
.char:nth-child(8n+6) { top: 1.5px; }
.char:nth-child(8n+7) { top: 1px; }

Animated wavy text:

.passage {
  font-size: 3em;
}
.char { 
  position:relative;
}
.char:nth-child(8n) { 
  animation: wavetext 4s 0s infinite;
  -webkit-animation: wavetext 4s 0s infinite;
}
.char:nth-child(8n+1) { 
  animation: wavetext 4s -0.5s infinite;
  -webkit-animation: wavetext 4s -0.5s infinite;
}
.char:nth-child(8n+2) { 
  animation: wavetext 4s -1s infinite;
  -webkit-animation: wavetext 4s -1s infinite;
}
.char:nth-child(8n+3) { 
  animation: wavetext 4s -1.5s infinite;
  -webkit-animation: wavetext 4s -1.5s infinite;
}
.char:nth-child(8n+4) { 
  animation: wavetext 4s -2s infinite;
  -webkit-animation: wavetext 4s -2s infinite;
}
.char:nth-child(8n+5) { 
  animation: wavetext 4s -2.5s infinite;
  -webkit-animation: wavetext 4s -2.5s infinite;
}
.char:nth-child(8n+6) { 
  animation: wavetext 4s -3s infinite;
  -webkit-animation: wavetext 4s -3s infinite;
}
.char:nth-child(8n+7) { 
  animation: wavetext 4s -3.5s infinite;
  -webkit-animation: wavetext 4s -3.5s infinite;
}
@keyframes wavetext {
  0%, 100% { top: 0em; } 50% { top: 0.5em; }
}
@-webkit-keyframes wavetext {
  0%, 100% { top: 0em; } 50% { top: 0.5em; }
}

Rapid rainbow text:

.char:nth-child(8n) { color:hsl(45,100%,75%); }
.char:nth-child(8n+1) {color:hsl(90,100%,75%); }
.char:nth-child(8n+2) {color:hsl(135,100%,75%); }
.char:nth-child(8n+3) {color:hsl(180,100%,75%); }
.char:nth-child(8n+4) {color:hsl(225,100%,75%); }
.char:nth-child(8n+5) {color:hsl(270,100%,75%); }
.char:nth-child(8n+6) {color:hsl(315,100%,75%); }
.char:nth-child(8n+7) {color:hsl(0,100%,75%); }

Illuminate letters on mouseover

.char { 
  transition: all 5s; -webkit-transition: all 5s;
  opacity: 0.4;
}
.char:hover {
  transition: all 0.1s; -webkit-transition: all 0.1s;
  opacity:1;
  text-shadow: 0 0 1em white;
}

Erase text on mouseover

.char { 
  transition: opacity 999s step-end; -webkit-transition: opacity 999s step-end;
}
.char:hover {
  opacity:0;
  transition: opacity 1ms; -webkit-transition: opacity 1ms;
}

Remove all the T's in the passage text:
.char.t {
  display:none;
}

Change "u" to "U":

.char.u {
  visibility:hidden;
}
.char.u::before {
  content: "U";
  position:absolute;
  visibility:visible;
}

These are to be considered basic examples - prompts for more practical uses.

This code also enables some particularly interesting Javascript visual effects to be performed, which I shall explore in a future blog post.

Feel free to report any bugs to @webbedspace.

AttachmentSize
Myriad-lighttouch.html100.42 KB
TwineCSS-colourwave.html101.5 KB
Myriad-wavytext.html101.33 KB
Myriad-crumbletext.html103.48 KB
Hazel-Rah's picture

the fox and the moon

Untitled.png

become one with nature

made using the Bitsy game engine

Made For: 
An event

How to use JavaScript arrays in Twine

An array is essentially an ordered list of data values, such as strings or number expressions. You can declare a Twine variable to be an array using just the set macro.

*To create an empty array called $inv: <<set $inv = [] >>
*To create an array called $inv containing the string "Dagger": <<set $inv = ["Dagger"] >>
*To create an array called $inv containing "Dagger", "Shield" and "Potion" in that order: <<set $inv = ["Dagger", "Shield", "Potion"] >>

To examine or change the values inside an array, a number of methods are available that can be used in the set, if and print macros. Here are some examples.

Examining arrays and their contents

*To print the entire contents of an array in order (usually for debug purposes): <<print $inv >>
*To see if the value "Magic Knife" is inside an array: <<if $inv.indexOf("Magic Knife") gte 0>>
*To get the number of values inside an array: <<set $size = $inv.length >>
*To get the first value inside an array: <<set $first = $inv[0] >>
*To get the last value inside an array: <<set $first = $inv[$inv.length - 1] >>

Changing values in arrays

*To add the value "Magic Knife" to the end of an array: <<set $inv.push("Magic Knife")>>
*To add the values "Blunt Axe", "Key" and $item to the end of an array: <<set $inv.push("Blunt Axe", "Key", $item)>> (push() can insert many values at once.)
*To add the value "Weird Pear" to the start of an array: <<set $inv.unshift("Weird Pear")>>
*To add the values "Blunt Axe", $item, 2, and $weapon to the start of an array: <<set $inv.unshift("Blunt Axe", $item, 2, $weapon)>> (unshift() can also insert many values at once.)
*To remove the value "Weird Pear" from an array: <<set $inv.splice($inv.indexOf("Weird Pear"),1)>>
*To sort an array alphabetically: <<set $inv.sort()>>
*To reverse an array: <<set $inv.reverse()>>
*To remove the first value from an array: <<set $inv.shift()>>
*To remove the last value from an array: <<set $inv.pop()>>
*To remove the first value from an array and set $item to it: <<set $item = $inv.shift()>>
*To remove the last value from an array and set $item to it: <<set $item = $inv.pop()>>

Syndicate content
pensive-mosquitoes