Random posts

Twine: preloading images

Update: embedded images in Twine 1.4 do not need to be preloaded, so this is not necessary if you are using those.

If you use a lot of images in your Twine game, it would be very good of you if you preloaded them at the start of the game - having to wait for images to load during a story, even momentarily, can be distracting.

Now you could bother to convert them all to inline Base64, but there's other, less intrusive ways. You could, rather, put every image in your story in invisible img tags in the Start passage:

<html>
<img src="  [url of an image ] " style="display:none;" >
...
</html>

...but of course, that requires you to manually list every image yourself. Here is my recommendation: use this JavaScript that will do it automatically, when the story starts. Just put this in a passage tagged with "script".

(function(){var r="";var s=Wikifier.formatters;for(var j=0;j<s.length;j++){if(s[j].name=="image"){r=s[j].lookahead;
break;}}var div=document.getElementById("storeArea").firstChild.nextSibling;while(div){if(r){k(new RegExp(r,"mg"),4);
}var b=String.fromCharCode(92);var u=b+"s*['"+'"]?([^"'+"']+(jpe?g|a?png|gif|bmp))['"+'"]?'+b+"s*";
k(new RegExp("url"+b+"("+u+b+")","mig"),1);k(new RegExp("src"+b+"s*="+u,"mig"),1);
div=div.nextSibling;}function k(c,e){do{var d=c.exec(div.innerHTML);if(d){var i=new Image();
i.src=d[e];}}while(d);}}());

That's all.

Update 17/2/13: This now works with images in HTML <img> tags as well.

Update 12/2/13: This will now also preload images used in CSS url( ... ) values. It will search for such values in every passage, include the stylesheet passages, script passages, and inline JavaScript.

Version history:

  1. 17/2/13 - Now works for image files specified in HTML src="..." attributes.
  2. 13/2/13 - CSS preloading now only loads JPEG, JPG, PNG, APNG, GIF and BMP files (that is to say, not font files).
  3. 12/2/13 - Now preloads images specified by CSS URL values too.
  4. 19/1/13 - Initial.
+b+

tininsteelian's picture

The Six-Hour Tinned Jam

Fri, Jan 25 2019 10:00 PM
01/26/2019 - 00:00
01/27/2019 - 06:00
US/Eastern

It's been a long time since the last time-limited jam, and after releasing a game on Steam that I worked on for years, I've been looking for ways to get into doing smaller projects. So I decided to create a game jam that my friends and everyone here can participate in.

The challenge: Make a game in six hours. That's it. You can use any engine, any assets, any anything. Any level of quality is perfectly fine. It doesn't matter if you're a professional game developer, or if you've never made a game before in your life. Download a copy of Unity or Klik & Play and make something!

Since a single six-hour period of time might be difficult for people depending on which time zone they're in, the event is open for a 30 hour period. Just pick the six-hour period that works best for you. The "recommended" period is from 5 PM to 11 PM EST, which is when I'll be making my game and streaming it on my Twitch channel: https://twitch.tv/tininsteelian . Feel free to make your game along with me, or not. On Sunday (the day after the jam), I'll stream every game that was made during the jam.

If you don't know what type of game you want to make, there's an optional theme. It's...

Feel free to interpret this theme in any way you like. Maybe your game is inspired by Kidz Sports Basketball, or maybe it's about someone who wears a shovel as clothing. If you don't like the theme or can't think of anything to do with it, then you can just ignore it. This event isn't about restrictions (besides the time limit), it's about having fun!

I'm looking forward to seeing all of your games!


Games made for The Six-Hour Tinned Jam

Pizza Time's picture

Olympic Diving

09title.jpg
Game File: 

In the exciting new game Olympic Diving your chance to impress the crowd with all your hard work and training in this vertical sport has finally come. Twist and spin your body through the air and land perfectly for that much earned podium place.

Made For: 
Pirate Kart 2
squidlarkin's picture

Unpoker

An attempt to remove the randomness from poker. @mcclure111 gets some of the idea credit.

This is the game, right here:
Each player has one standard deck of playing cards. For each hand, every player secretly draws a five-card hand from their own deck. Three rounds of betting occur, with each player progressively revealing one card of their choice between rounds. After the final round, all unfolded players reveal their remaining two cards and the hand is resolved. Hands are discarded after use, without revealing any still-hidden cards. Memory aids for played cards are allowed, and should be included in computerized implementations. All other rules are the same as standard poker.

Made For: 
An event

The Rat's Dream

ratsdream.jpg

a rat dreams of crazy stuff

Event Created For: 
Made For: 
An event
Son of a dolphin's picture

the opposite of margarine

Screenshot from 2016-01-17 01:55:11.png

the opposite of margarine, take it as you will

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

Canabalt For Pink Daleks

screenshot103.png

Pink Dalek glass smashing extravaganza! Exterminate! Exterminate! Conquer and destroy!

Made For: 
Pirate Kart 2

Seizure Jumper

Jumper.jpg
Game File: 

use spacebar to jump over the blocks to increase your score. do not play if you suffer from epileptic fits - lots of flashing colors and randomness. windows only, sorry :(

Author: 
Daydalus
Made For: 
An event
Syndicate content