Tutorial | FableForge

Jun

Submitted by Marco on Fri, 06/05/2009 - 10:02

This is a walkthrough of a very simple proof-of-concept game called "The Warehouse Ghost". (Also try this: The step-by-step Beginner's Guide )

"The Warehouse Ghost" is not really a game, but simply a collection of features of the Game Engine, such as:

Handling of text
GUI items
Location items
Shadowside items
Timers
Dexterity-based challenges
Multiple Endings
etc.

The following video explains most of these features.

Optional Assets:

Note that all these assets are optional! You don't -have- to have them in order to make your own game, this is just in case you want to do something in the SCaV3NG3R universe and wish to keep some consistency with the look and feel of ghosts or the shadowside.

I still recommend you take a look anyway; it can help you figure out things such as motion in swf files, how to have a working shadowside layer, etc.

Visit the Assets page for more pre-made stuff.

Asset	What's It For	How To Use
XML for "The Warehouse Ghost"	You can learn how this game was built, experiment with it, and use it as a base for your own.	Create a new game Paste this xml in the xml field. Save it. You're done! Launch the game and you'll see its "The Warehouse Ghost". Start experimenting, have fun.
Photoshop macro that creates shadowside versions of any image.	You can create your own shadowside locations based on real-world images, for games that take place in the SCaV3NG3R universe. Example: you can go from this to this (click on the image to open full size versions)	You need Photoshop 6 or better. Copy the file to your (Photoshop)/Presets/Photoshop Actions folder. In Photoshop, go to the Window menu and make sure the Actions pane is on. In the Actions pane click on the little "play" icon in the top-right corner, and choose "Load Actions..." from the pop-up menu. Choose "portal13.atn". Make sure your image only has one layer named "Background". Select the "ghostlandize" action from within the portal13 set (its the second one). Hit "Play". Save your image, and give it a name that begins with "ghost_" as in "ghost_myLocation.jpg". Upload both myLocation.jpg (the real-world image) and ghost_myLocation.jpg to the same folder anywhere in the internet. In the Scavenger editor, set the full URL for myLocation.jpg as your Location Image. Save and re-load: you should see myLocation.jpg when in game, and a transparent ghost_myLocation.jpg in the editor (or fully visible through the ritual cellphone).
Photoshop PSD for the ghost of Jane	You can use the layer settings to make your own ghosts for games that take place in the SCaV3NG3R universe. Example: This:	Right-click on the layer named "Background copy" and choose "Copy Layer Style" from the pop-up menu. Right-click the layer where you have your own ghost in your own PSD file, and choose "Paste Layer Style" from the pop-up menu. Or, FTA: Opacity 77% Outer Glow: Mode: Screen Color: BEE7FF Opacity: 75% Size: 38 Inner Glow (same except) Color: FFFFBE Size: 35 File > Save For Web, I recommend a 24-bit PNG with transparency enabled. Put your file anywhere in the internet. In the Scavenger editor, set the full URL to your file in the "File" field of your location item. Remember to start the name of your item with "ghost_" if you want it to be shadowside-only!
Flash FLA for the animated ghost of Jane.	You can learn how to bring animated sprites into the SCaV3NG3R Game Engine.	FTA: You will simply realize this is an tween made with a transparent PNG that is just moving around the empty canvas in a loop. Important: the canvas must be empty, because -whatever- you put in it, will be -clickable- in the game! Also note: The game runs at 60 frames per second, so your swf sprites should too.
PSD template for the player's diary.	You can use the diary in your own games, just add your own text.	In photoshop: Edit the text. Raster the layer Edit>Distort the layer so that it fits the book's corners. Save your file (remember to make it a transparent PNG). Put it anywhere in the internet and set the URL in the game editor (remember to name the item starting with "gui_" so that it doesn't pan with the location.
Flash FLA for the animated player's diary.	You can learn how to do multi-stage animation for your in game items (the diary goes up, stops, then down, stops). (click for larger version)	In Flash: open the file. Observe how each animation stage is made. Have fun making your own :)