Random posts

TheCube's picture

Grocery BASEing

grocerybaseing.PNG

A game about combining menial tasks with extreme sports. UPDATE: High Scores now work. Yes this is cheating no i dont care

Event Created For: 
Made For: 
An event
vampirkat's picture

Going back in time

I was wracking my brain for ideas (maybe I should have some space cake!) and somewhere in the void that has become my brain (which have survived many scientific tests involving dubious substances) did I remember writing a blog somewhere on the internets. So I plugged the address into the wayback machine and voila! My old blog and gaming notes!!! Thank goodness I still remembered that shizz. I downloaded all that I could as all my backups of these old sites are rotting away on floppies ('mema them?) and I'm not home to go thru them.

So yay, I have my notes. Now to get to cranking on some glorious trainwrecks!

snapman's picture

Action Point 2010 [The Awards are in!]

Sat, Aug 28 2010 04:00 PM
08/28/2010 - 16:00
08/28/2010 - 18:00
Etc/GMT-7

[Congratulations to The Winners!]


The awards ceremony begins now...
[Download Here]

==================================================================

Welcome to Action Point 2010! Join us in celebrating our 10nth Anniversary! Action Point is the world's leading Klik & Play Online Demoscene Party. This year's (un)unofficial theme is "Acceleration Killed the Demoscene Star!"


[Click here to download the 2010 Invitation Demo]

For those who have no idea what I'm talking about, Action Point is a yearly online "Scene Party" in which we make Demos and Intros and Cracktros and anything else that involves pretty effects and ridiculous non-interactive visual absurdity in the medium of Klik & Play.

While the Demoscene's primary interest is technical ability with a high-gloss sheen of visual design and musical talent, take note that this is still Glorious Trainwrecks. Action Point is more than simply a celebration of elaborate event writing. It is also about creating unusual and unique visual/auditory art as well. What I'm trying to say is that while simulated 3D effects in KnP are expected, a torrent of dancing Wizards is also a desirable outcome.

OFFICIAL DEADLINES AND SUCH
This is a TWO-WEEK EVENT. That means you should start making a demo TODAY, and be here on SATURDAY AUGUST 28th, exactly one week to-the-second after this month's KOTM. Submit your demo(s) to this page at that time (or earlier if you can't make it). Also let's meet up on IRC and the MUMBLE SERVER because this is the release party.

One week later, at the same time of day, will be the AWARDS CEREMONY. Awards in a .gif format will be given to winners in a variety of mostly made-up categories. These highly-coveted awards are ideal for posting on your homepage, next to netscape navigator download icons and your awards for "CNET SITE OF THE DAY".

LAST YEAR'S WINNERS


mojofltr

strong

SpindleyQ

mojofltr



qrleon

strong

qrleon

REGARDING STYLE AND PRESENTATION
Reductivists and Optimalists welcomed equally! Dutch color schemes encouraged! (They're practically mandatory with the default Klik & Play palette) Style points (and gusto points) will be awarded! Oh, and check out this totally sweet picture I found while looking up Demoscene pixelart:


That is so rhinoceros.

Always remember: When the hardware makes the impressive easy, use the software that is most restrictive!

AttachmentSize
AP2010INTRO.zip880.98 KB
AP_Awards_2010.zip953.46 KB

Games made for Action Point 2010 [The Awards are in!]

NameCreatedsort iconByScreenshotComments
Rendering Ranges08/29/2010 - 01:04Blueberry SoftRendering Ranges - description.gif4
RanDemo08/28/2010 - 18:04qrleonrandemo.png1
Klik & Reality08/28/2010 - 16:01SpindleyQknpmonster.png6
Wizzard.torrent08/28/2010 - 15:19Zecks2
rhetoricstu's picture

sock player

sock player hits the sock ball and wins a contract as a hooker.

hookers play rugby league

Event Created For: 
Made For: 
An event
mkapolk's picture

Tummy Jigglers

ss.png
Game File: 

here is an art game about tummies i love you

Event Created For: 
Made For: 
An event

Twine: Custom CSS passage transitions

I've modified my previous Sugarcane passage transition code to allow you to define your own transitions with CSS.

Update: the Javascript that was on this page is now installed in Twine 1.4.

What this does is remove the default JavaScript transition from Sugarcane, and cause the outgoing passage to gain a "transition-out" class, and the incoming passage to instantly gain and lose a "transition-in" class. This enables you to define new passage transitions by styling these 3 classes using CSS.

CSS Examples

In order for there to be a transition, you must specify the transition property for your passage elements. A very basic example is as follows:

.passage {
	transition: 0.25s linear;
	-webkit-transition: 0.25s linear;
}
The transition property causes elements to transition between styles when they gain and lose them, in a specific way. In this case, it's a quarter-second, purely linear transition. (Other options than "linear" are listed here.) The maximum duration time before the departing passage is removed is 1 second.

The current versions of Opera, Firefox and IE support the plain transition property, but you need to also include the -webkit variant in order to work in Chrome and Safari (you can also include -khtml-transition for Konqueror users, few though they may be).

Now that you've defined the transition itself, you can define the styles that the passages can transition from and to.

A very basic example:

.transition-in {
	position:absolute;
	opacity:0;
}
When a new passage arrives, its style will transition from the "transition-in" style to the normal passage style. In this case, it starts invisible ("opacity:0") and fades in to visibility. Note the "position:absolute" - both "transition-in" and "transition-out" should have either position:absolute or position:fixed if you want them to neatly appear above or below each other.
.transition-out {
	position:absolute;
	opacity:0;
}

Putting identical styles for "transition-out" means that departing passages will fade out of visibility as well. With all 3 of these CSS snippets, you've replicated the "dissolve" transition linked above.

A broad number of CSS attributes can be used with this technique. Experiment!

Combining with tag-based CSS

If you use my tag-based passage CSS code, you can tie transitions to passages tagged with a particular tag. For instance, to bind the "dissolve" transition to passages tagged with "t8n-dissolve":

body[data-tags~=t8n-dissolve] .transition-in {
	position:absolute;
	opacity:0;
}
body[data-tags~=t8n-dissolve] .passage {
	transition:1s;
	-webkit-transition: 1s;
}
body[data-tags~=t8n-dissolve] .transition-out {
	position:absolute;
	opacity:0;
}
I recommend prefixing all transition-based tags with something identical, like "t8n" (a numeronym of "transition"). This way, you can then define a default transition to be used only when no "t8n" tags are present:
body:not([data-tags*=t8n]) .transition-in {
	opacity:0;
	transform: translate(0,3rem);
	-webkit-transform: translate(0,3rem);
	position:absolute;
}
body:not([data-tags*=t8n]) .passage {
	transition: 2s;
	-webkit-transition: 2s;
}
body:not([data-tags*=t8n]) .transition-out {
	opacity:0;
	transform: translate(0,-3rem);
	-webkit-transform: translate(0,-3rem);
	position:absolute;
}

(Remember that [data-tags*=t8n] selects elements whose tags contain "t8n", and :not() selects elements that do not fulfill the requirement in the brackets.)

It's important that if you use multiple transitions, the default transition should be guarded using body:not([data-tags*=t8n]), so that its code doesn't interfere with the other transitions' code.

To see an example where the first four passages are tagged "t8n-dissolve" and the rest are not, see here.

Live examples
All examples are "The Sky in the Room" by Porpentine.

Fade in (the default transition)

.transition-in {
	opacity:0;
	position:absolute;
}
.passage:not(.transition-out) {
	transition: 1s;
	-webkit-transition: 1s;
}
.transition-out {
	opacity:0;
	position:absolute;
}

Specifying :not(.transition-out) means that the transition is applied only for the incoming passage - the departing one instantly gets opacity:0. Note that specifying passage.transition-in would not do anything, since it is by removing the transition-in class that the transition is initiated.

Dissolve

.transition-in {
	position:absolute;
	opacity:0;
}
.passage {
	transition: 1s;
	-webkit-transition: 1s;
}
.transition-out {
	position:absolute;
	opacity:0;
}

Retro 8-bit four-step fade in

.transition-in {
	opacity:0;
	position:absolute;
}
.passage:not(.transition-out) {
	transition: 0.8s steps(3);
	-webkit-transition: 0.8s steps(3);
}
.transition-out {
	opacity:0;
	position:absolute;
}

Fade out

.transition-in {
	opacity:0;
	position:absolute;
}
.passage:not(.transition-out) {
	transition: 0s 1s;
	-webkit-transition: 0s 1s;
}
.transition-out {
	transition: 1s;
	-webkit-transition: 1s;
	opacity:0;
	position:absolute;
}

Vertical wipe
Sadly, this currently only works if you give the passage div a fixed width and height.
If you use this, replace all instances of "1200px" and "800px" with dimensions appropriate for your story.

.transition-in {
	clip: rect(0px, 1200px, 0px, 0px) !important;
}
.passage {
	clip: rect(0px, 1200px, 800px, 0px);
	width: 1200px;
	height: 800px;
	position: absolute;
	transition: 1s linear;
	-webkit-transition: 1s linear;
}
.transition-out {
	clip: rect(800px, 1200px, 800px, 0px);
}

Zoom In

.transition-in {
	opacity:0;
	transform: scale(0.8,0.8);
	-webkit-transform: scale(0.8,0.8);
	position:absolute;
}
.passage {
	width: calc(100% - 12em); // Necessary to keep the zoom origin point consistent.
	width: -webkit-calc(100% - 12em);
	transition: 0.5s ease-out;
	-webkit-transition: 0.5s ease-out;
}
.transition-out {
	opacity:0;
	transform: scale(2,2);
	-webkit-transform: scale(2,2);
	position:absolute;
}

Fast scroll up
Ideally you would use "vh" (viewport height) units instead of "rem" (root em) units, but not enough browsers support it yet. ;_;
You can also make it a slow fading scroll if you change the lengths to something short (like 3rem).

.transition-in {
	opacity:0;
	transform: translate(0,-100rem);
	-webkit-transform: translate(0,-100rem);
	position:absolute;
}
.passage {
	transition: 1s;
	-webkit-transition: 1s;
}
.transition-out {
	opacity:0;
	transform: translate(0,100rem);
	-webkit-transform: translate(0,100rem);
	position:absolute;
}

Garage door
This would work well with a story whose passage divs have a fixed width and height, but unlike the vertical wipe it isn't strictly necessary.

.transition-in {
	opacity:0;
	position:absolute;
}
.passage {
	background-color: #000;
	transition: 1s ease-in;
	-webkit-transition: 1s ease-in;
}
.transition-out {
	position:absolute;
	z-index:3;
	transform: translate(0,-200%);
	-webkit-transform: translate(0,-200%);
}

Focus

.transition-in {
	color:transparent;
	text-shadow: #fff 0 0 1em;
	position:absolute;
}
.passage:not(.transition-out) {
	transition: 1s;
	-webkit-transition: 1s;
}
.transition-out {
	opacity:0;
	position:absolute;
}

"Blur Merge"

.transition-in {
	color:transparent;
	text-shadow: #fff -4em 0 1em, #fff 4em 0 1em;
	position:absolute;
}
.passage:not(.transition-out) {
	transition: 1s;
	-webkit-transition: 1s;
}
.transition-out {
	opacity:0;
	position:absolute;
}

Feel free to report any bugs to @webbedspace.

AttachmentSize
tsitr_fadein.html92.69 KB
tsitr_fadeout.html92.74 KB
tsitr_scrollup.html92.82 KB
tsitr_focus.html92.76 KB
tsitr_sillyrotate.html92.92 KB
tsitr_retrofadein.html92.71 KB
tsitr_spin5seconds.html92.98 KB
tsitr_blur_merge.html92.74 KB
tsitr_garagedoor.html92.78 KB
tsitr_zoomin2.html92.92 KB
tsitr_verticalwipe.html92.87 KB
tsitr_t8ntest.html93.84 KB
Johny L.'s picture

Open teh KnP files in MMF2

I found out how you can play a KnP game in Windows 7 (this also works for older OS), you have KnP game files while you have MMF2. You know that MMF2 is backwards compatibility and can import/open Klik n Play files, The Games Factory and Multimedia Fusion 1. Just drag and drop the .gam file on the program and then the program will import it.
It's easy.
I use it everytime because i like viewing game sources.

gevaudan's picture

Attack of the 15 Meter Lesbian and Her GirlFriend

1167 lesbian giant.png

you and your girlfriend fight tanks and maybe a secret boss
im tired give me a break
all songs from the noise archive backup

Author: 
Marie Gevaudan
Made For: 
An event
dessgeega's picture

SPACE MARINE GROCERY SHOPPING

marine.png
Game File: 

you're a space marine! your enormous bulk and tank controls are a boon when fighting space monsters, but it sure gets in the way when you're trying to shop for groceries! pick up a carton of eggs, but try not to rack up your bill too high in the process!

Event Created For: 
Made For: 
An event
thesycophant's picture

Jill of the City in Wrangler Denim and Shoes Enslavement Escape Adventure

screenshot377.png

You're Jill of the City, an enslaved adult female! Escape the evil city of enslavement with the assistance of Wrangler denim and shoes!

Press X to jump!

Author: 
John D. Moore
Made For: 
An event
Syndicate content