Random posts

qrleon's picture

A Blackthorne and his Blob

A_BLACKTHORNE_AND_HIS_BLOB_PIC.png
Game File: 

Feed jellybeans to your shapeshifting friend to help you gun down aliens.

Made For: 
Pirate Kart 2

A breakdown of the CSS in my Twine game Capri Toot

This is the inline CSS I used in my Twine game, Capri Toot. Of course, I had to write some other CSS for my special horizontal hacked variant of Jonah, but this below is where almost all of the visual style of Capri Toot comes from.
----------------
#passages {
background-color: #000;
overflow:hidden;
}

----------------
"overflow: hidden" hides the horizontal scrollbar in the passages DIV, which is useful because backtracking isn't possible in Capri Toot.
----------------

@keyframes borderkeyframe
{
0% {box-shadow: 0 0 2.5em 2.5em }
50% {box-shadow: 0 0 0.5em 0.5em }
100% {box-shadow: 0 0 2.5em 2.5em }
}

@-moz-keyframes borderkeyframe
{
0% {box-shadow: 0 0 2.5em 2.5em }

50% {box-shadow: 0 0 0.5em 0.5em }

100% {box-shadow: 0 0 2.5em 2.5em }

}

@-webkit-keyframes borderkeyframe
{
0% {box-shadow: 0 0 2.5em 2.5em }

50% {box-shadow: 0 0 0.5em 0.5em }

100% {box-shadow: 0 0 2.5em 2.5em }

}

@-o-keyframes borderkeyframe
{
0% {box-shadow: 0 0 2.5em 2.5em }

50% {box-shadow: 0 0 0.5em 0.5em }

100% {box-shadow: 0 0 2.5em 2.5em }

}
----------------
CSS Keyframes: These define the animated pulsing glow behind the passages. There are four definitions because each browser has its own syntax (except IE, which doesn't support this). These define some timeline events which the browser tries to smoothly interpolate between. When the animation is 50% complete, the box-shadow is retracted to a size of 0.5em. When the animation starts and finishes, it's at its full size of 2.5em. Defining both a 0% and 100% point ensures that it loops smoothly, if an element uses it as a looping animation.
----------------

.passage:nth-child(8n+7) {
text-shadow: 0 0 0.6em hsl(0,100%,60%);

color: hsl(0,100%,50%);

background-color: hsl(0,100%,5%);

}

.passage:nth-child(8n) {
text-shadow: 0 0 0.6em hsl(45,100%,60%);

color: hsl(45,100%,50%);

background-color: hsl(45,100%,5%);

}

.passage:nth-child(8n+1) {
text-shadow: 0 0 0.6em hsl(90,100%,60%);

color: hsl(90,100%,50%);

background-color: hsl(90,100%,5%);

}

.passage:nth-child(8n+2) {
text-shadow: 0 0 0.6em hsl(135,100%,60%);

color: hsl(135,100%,50%);

background-color: hsl(135,100%,5%);

}

.passage:nth-child(8n+3) {
text-shadow: 0 0 0.6em hsl(180,100%,60%);

color: hsl(180,100%,50%);

background-color: hsl(180,100%,5%);

}

.passage:nth-child(8n+4) {
text-shadow: 0 0 0.6em hsl(225,100%,60%);

color: hsl(225,100%,50%);

background-color: hsl(225,100%,5%);

}

.passage:nth-child(8n+5) {
text-shadow: 0 0 0.6em hsl(270,100%,60%);

color: hsl(270,100%,50%);

background-color: hsl(270,100%,5%);

}

.passage:nth-child(8n+6) {
text-shadow: 0 0 0.6em hsl(315,100%,60%);

color: hsl(315,100%,50%);

background-color: hsl(315,100%,5%);

}

----------------
These are used to colour each of the zone tiers differently. When you click on a link in Jonah (as compared to Sugarcane) a new passage div is added to the end of the #passages div as a new child node. The nth-child() selector allows you to apply specific styles to an element depending on which child it is. nth-child(8n) means that every eighth child should have this style (starting with the first). nth-child(8n+1) means that every eighth child, plus 1 position over, gets this style. So, with these eight definitions, a looping cycle of eight colours is produced. This is kind of overkill for Capri Toot since you can only ever go 8 passages deep, but w/e.

Also, a note: if you don't specify a colour for box-shadow, then it falls back to using the text colour. Hence, we use a colour style here to change the animated shadow's colour without having to set up eight different keyframes (x 4 browsers).
----------------

.passage {
margin-left: 33%;

margin-right: 33%;

min-width: 33%;

margin-top: 3em;

margin-bottom: 3em;

border-radius: 8em;

border-color: white;

border-width: 2px;

box-shadow: 0 0 2.5em 2.5em;

animation: borderkeyframe 3s infinite;

-moz-animation: borderkeyframe 3s infinite;

-webkit-animation: borderkeyframe 3s infinite;

-o-animation: borderkeyframe 3s infinite;

}
----------------
The margin and min-width definitions mean that only one passage is ever visible at one time. The border-radius definition produces the delightful rounded rectangle edges. The animation definitions bind the aforementioned keyframe to this element, give it a speed (3 seconds) and tell it how many times to loop (infinite). Again, 4 definitions because each browser (except IE) has different syntax.
----------------

.passage .body .internalLink {

font-style: italic;

font-size: 1.5em;

color: white;

text-shadow: 0 0 0.6em silver;

}
.passage .body {

color: white;

text-shadow: inherit;

}
.passage .title {

margin-top: 0.2em;

font-style: italic;

font-size: 2em;

color: white;

text-align: center;

}
----------------
Fairly straightforward. Setting .body's text colour to white overrides the previous colour definition for .passage (which as I mentioned is being used for the box shadow).
----------------

.toolbar {

display:none;

}
----------------
This single-handedly hides the Jonah "rewind / bookmark" prompts for each passage. Quite convenient.

CureLovelyWarrior's picture

Lovely Warriors of Friendship

LovelyScarlet.png

A Megaman-esque platformer with a goal of spreading love, friendship, and innocence.

Features:

Play as one of many warriors of friendship of your choosing, with a choice of characters from many series, the most important being Precure, My Little Pony, and Pokemon.

Choose from over 70 playable characters! Play as your favorite cure or pony, or choose that indie game character that stood out to you!

Reform Discord, and take down Tirek!

Defeat and reform the unlovely forces of the Phantom Empire!

Flying mode with even more characters, using a completely different control style.

Play as many cute characters, including Satori, Spiritia, Princess Luna and Meloetta.

Rokko Chan, Spiritia, and Mega Pony can obtain weapons by defeating bosses.

Play as a sparkling shiny pokemon, or have the Happiness Charge Precure change into alternate forms.

Some characters have extra abilities, such as melee attacks, double jumps and dashes.

This game gives you "lovely hearts" whenever you complete certain tasks in the game. You might know of this idea as "achievements" or "trophies". However, hearts are much more awesome than golden medals or cups. Hasn't anyone ever told you that money can't buy you love?

The game runs almost entirely off borrowed or mixed resources. I believe unoriginal is the new original!

Proud to announce that the game has "Megpoid Talk" as the menu voice. AKA The voice of Megumi Nakajima/Gumi/Cure Lovely/Cure Unlovely/Meloetta.

The game is completely free, and family friendly!

Author: 
CureLovelyWarrior
Made For: 
An event
thesycophant's picture

Upcoming weekend of/24 hours of/Blitzkrieg ZZT

I'm thinking about staging a ZZT jam for trainwreckers some weekend in May. I haven't made a game in ZZT in over 9 years and thought it might be fun to kind of go back to my roots. Anyone interested? Would it be best as a day thing, a weekend thing, or a 2-hour thing?

I was thinking about some sort of compilation with people making as many ZZT games as they can over the course of a day or weekend, kinda like a smaller scale Pirate Kart.

special space room run blink keyword pizza zombie lightbulb pizza plasma purchase buy buy sale

snapshotfix.png

And if ain't good enough I'll do whatever Till I know
I can make you want something better, you gotta learn to take the fall Now I
find out that nothing is given Don't know where it was going to but I was
younger I would open every door I still don't know which So I went out and
bought me a leisure suit.

Author: 
ninjinere d00d
Event Created For: 
Made For: 
An event
Danni's picture

Amiga Boing Ball in Checker World

CheckerWorld.png
Game File (Linux): 
Game File (Mac): 

So now that I have access to OS X, I decided to toy around with Unity. I had no idea where to start (How do you add objects? How do you add behaviors? Etc. Etc.), so I followed the "Roll-a-Ball" Unity video tutorial for a bit and then decided to go in my own direction.

A blatant rip-off of Inspired by Nifflas' "The Big Sea".

Arrow keys to move. Try to get to the golden plate at the end. Also this game is really short and probably isn't even worth downloading.

Edit: I tried using a third party archiver on OS X to try and get rid of the .DS_Store pollution but the thing broke the folder hierarchy. Won't be using that program again! Reuploaded using a Linux archiver that actually works.

Made For: 
An event
ioshiin's picture

olympic velocaraptor orange curling

velo.JPG
Game File: 

oh god its so annoying :<

Made For: 
Pirate Kart 2

ART GALLERY

Syndicate content