flicksy

a tool for drawing and assembling graphical hypertext games

getting started

  1. create some drawings in the drawings tab above
  2. compose a scene in the scenes tab above
  3. playtest and export your game in the play tab above

project details

name

double resolution

export

publish

switch projects

reset

load project from file

drawing board tab

getting started

  1. create a drawing using the add drawing section below
  2. click the draw button to enter the drawing mode
  3. pick a brush size and colour to draw in
  4. click and drag on a drawing to draw on it

cursor

  1. you can choose a drawing to act as the game's mouse cursor for clicking on objects
  2. the clicking area of the cursor is a single pixel, which you can move with the cursor pivot
  3. a cursor pivot of 0,0 means the top left corner of the drawing is where the clicking happens

drawings

cursor drawing

cursor pivot

add drawing

selected drawing

name

layering

size

pivot

other

drawing tools

brush

color

scene tab

getting started

  1. create an object using the pick drawing button in the scene section below
  2. click and drag the object to position it within the scene
  3. type some dialogue into the object behaviour section below
  4. click play scene in the playtest section below and click on your object!

scene

active scene

add object

object appearance

name

drawing

layering

other

object behaviour

dialogue

scene change

behaviour help

clicking on an object

  1. text is presented in a series of dialogue boxes
  2. the game jumps to another scene

dialogue formatting

page{ep}break

{+wvy}wavey text{-wvy} and {+shk}shakey text{-shk}

{clr=red}red text{-clr} and {clr=#FF00FF}magenta text{-clr}

{delay=.25}slow text{-delay} and {+r}revealed text{-r}

object behaviour

script

insert reference

scripting help

intro

in flicksy2 you can script objects using javascript. it's easiest to use the provided commands but you can do anything

values

SCENE the reference id of this scene

OBJECT the reference id of this object

actions

SAY("SOME TEXT") queue dialogue

LOG("SOME TEXT") put a line of text in the playtest log, to help debug

HIDE("object reference") hide the referenced object, making it invisible and unclickable

SHOW("object reference") unhide the referenced object

SET("variable name", "value") set a new or existing variable to some value. numbers, reference ids, dialogue, etc all allowed

GET("variable name") get the value of a previous set variable. use this is conjunction with an if statement to do conditional scripting

TRANSFORM("object reference", "drawing reference") change an object's drawing

TRAVEL("scene reference") switch to a new scene

waiting

await DIALOGUE wait until there is no dialogue on screen

await DELAY(.5) wait for some number of seconds

LOCK() prevent clicking on objects

UNLOCK() allow clicking on objects

examples

the default behaviour of an object is as follows:

await SAY("text from the dialogue editor")
TRAVEL("scene reference of destination scene")

advanced

you can do things conditionally depending on the value of variables, using javascript's if statements:

if (GET("coins") == 3) {
  SAY("three coins")
} else if (GET("coins") > 3) {
  SAY("so many coins..")
} else {
  SAY("get more coins")
}

scene map tab

getting started

  1. create a scene using the scenes section below
  2. click and drag to reposition scenes for easier reference
  3. double click a scene to open it in the scene editor tab

scenes

starting scene

add scene

previews

selected scene

name

edit

layering

playtest

play

getting started

  1. click on objects to trigger dialogue and scene changes
  2. restart and replay the game using the restart button below
  3. go to the map tab to add new scenes or change the starting scene
  4. export your finished game using the export html button below

playtest

game

scene

log

picker

pick an item

pick an item for use elsewhere

change color

hue and saturation

value

hex code