gist-txt @ Manhattan.js

01.markdown

state
next prev 02 index

What is gist-txt?

gist-txt is an adventure game engine

AdventureJam

02.markdown

state
next prev 03 01

Adventure games

Did you ever play with The Secret of Monkey Island?

03.markdown

state
next prev 04 02

Text adventures

Late '70, early '80

Zork

Command line

04.markdown

state
next prev 05 03

Twine

Text adventures are HTML documents

Desktop app (also web)

05.markdown

state
next prev 06 04

What I wanted

Markdown

Git

JavaScript (+ Mustache)

Hosted

06.markdown

state
next prev 07 05

gist-txt

Compiles Markdown

Gist repos storage

JavaScript to override default behavior

Githup pages hosting

07.markdown

state
next prev 08 06

Step 1

Create a new gist

Add an index.markdown file

The main scene

08.markdown

state
next prev 09 07

Step 2

Add another file, cave.markdown

Markdown files are scenes

09.markdown

state
next prev 10 08

Step 3

Link scenes

Use Markdown link syntax

[Explore the cave](cave)

10.markdown

state
next prev 11 09

Step 4

Publish your game

It's already public

Share the link

http://potomak.github.com/gist-txt#<gist-id>

11.markdown

state
next prev 12 10

Step 5 (optional)

You can override the default style

Create a style.css file with your custom style rules

12.markdown

state
next prev 13 11

Step 6 (optional)

Game state

YAML Front Matter to set/update game state variables

state:
  treasure: true

Use Mustache to react to state

{{=<% %>=}} {{#treasure}}You're rich!{{/treasure}} <%={{ }}=%>

13.markdown

state
next prev 14 12

Routine

The first game published with gist-txt

Attending AdventureJam

Play at http://j.mp/play-routine

14.markdown

state
next prev 15 13

Help wanted

Create games

Write code

gist-txt repo at http://github.com/potomak/gist-txt

15.markdown

state	style
next prev 16 14	footer { color: initial; } footer a { color: #0cf; }

Bonus: meta-adventure

This presentation is a gist-txt text adventure!

The footer was hidden (custom CSS style)

index defines a function to transition between slides

Check the code by following the link in the footer

16.markdown

state
next prev 16 15

Thanks

Giovanni Cappellotto

@johnnyaboh

README.md

Play at https://potomak.github.io/gist-txt/#737a452d6f38c2b87403/

gist-txt-manhattanjs-notes.txt

-- index

In the last Brooklyn.js Byron Hulcher talked about how to make video games with Twine.
Today I'd like to talk about how to make video games with gist-txt.

-- 01
-- What is gist-txt?

gist-txt is an adventure game engine that I built mainly because I didn't like to use a desktop application to build my own adventure games.

It all started when I knew about the AdventureJam.

The AdventureJam is a game jam where you have two weeks to build an adventure game.

-- 02
-- Adventure games

I've always liked adventure games.

It all started with The Secret of Monkey Island.
Did you ever tried playing with that game? It's awesome.

-- 03
-- Text adventures

But in the beginning (late '70, early '80) there were text adventures like *Zork*.

Actually I never enjoyed playing with such kind of games.

You must type things in a command line, like "go north" or "open the door".

I get bored easily to insert commands that don't get recognized from the parser.

-- 04
-- Twine

At this point I discovered that you can easily build text adventures by only writing HTML documents, and that's when I learnt about Twine.

Twine is a desktop app that let's you create text adventures by simply connecting boxes full of text.

Well, right now it's also a web application, but I wanted to build my game with my own rules.

-- 05
-- What I wanted

I wanted to write markdown.
I wanted to edit it easily, to collaborate with my friends.
I wanted to use standard tools like javascript to add little features.
I wanted to share it with one click, without worrying about hosting.

-- 06
-- gist-txt

gist-txt was born.

It compiles and renders markdown.
It uses gists as a datastore.
It runs JS to let you override default behaviors.
It lets you share a simple link to publish your game.

-- 07
-- Step 1

Create a gist with a file named index.markdown in it.

This will be the initial scene.

-- 08
-- Step 2

Create another file called cave.markdown.

Every markdown file that you create in your gist is going to be a different scene of your game.

-- 09
-- Step 3

Add a link between the two scenes.

Links are markdown links without the .markdown extension.

In this case a link to the "cave" scene would be something like: [Explore the cave](cave)

-- 10
-- Step 4

Publish your game.

Well, it's already public!

Just share the link http://potomak.github.com/gist-txt#<gist-id> and you're done.

-- 11
-- Step 5 (optional)

Add some style.

You can customize the style of your adventure game by adding a "style.css" file to the gist.

-- 12
-- Step 6 (optional)

Game state.

You can react to events in your game using a global "state" variable that is accessible through mustache tags.

You can add a "treasure: true" state to the cave scene and react to that state in the index scene to show or hide a text paragraph.

Example: {{#treasure}}You're rich!{{/treasure}}

-- 13
-- Routine

Right now there's only one game built and published with this tool, it's called Routine, and you can play it at http://j.mp/play-routine

I built it with help from Daniel, Luca, and Francesco, some friends of mine, and it's attending the AdventureJam competition.

-- 14
-- Help wanted

The project is brand new and there's still a lot of things to do.

If you have some spare time and you want to collaborate on a simple JS project, take a look at its github repo page at http://github.com/potomak/gist-txt

-- 15
-- Thanks

index.markdown

init

state

function() { var updateLocation = function(slide) { var locationArray = window.location.hash.split('/'); if (locationArray.length > 1) { locationArray[locationArray.length - 1] = slide; window.location.hash = locationArray.join('/'); } else { window.location.hash += '/' + slide; } }; window.onkeydown = function(e) { switch(e.keyCode) { case 39: // right arrow case 32: // space bar updateLocation(state.next); break; case 37: // left arrow updateLocation(state.prev); break; } }; window.onclick = function(e) { if (e.clientX / window.innerWidth > 0.5) { updateLocation(state.next); } else { updateLocation(state.prev); } }; }

next prev 01 index

How to make games with gist-txt

Giovanni Cappellotto

How to browse this presentation:

• Next slide
  • Right arrow
  • Spacebar
  • Click on right side of the screen
• Previous slide
  • Left arrow
  • Click on left side of the screen

style.css

body {
  margin-top: 64px;
}

h1, h2, h3, h4, body {
  font-family: monospace;
}

h2::before,
h3::before,
h4::before {
  content: "• ";
}

h2 {
  margin-left: 32px;
}

h3 {
  margin-left: 64px;
}

footer,
footer a {
  color: #eee;
}

code {
  background-color: #eee;
  padding: 3px;
  border-radius: 3px;
  border: 1px solid #ccc;
}

pre > code {
  background-color: initial;
  padding: initial;
  border-radius: initial;
  border: initial;
}