217 lines
9.0 KiB
Plaintext
217 lines
9.0 KiB
Plaintext
----------- ----------- ----------- ----------- -----------
|
|
|
|
OBSHAGCE
|
|
|
|
The Official Blueberry Soft Hypermedia Adventure Game
|
|
Construction Engine
|
|
|
|
----------- ----------- ----------- ----------- -----------
|
|
|
|
https://obshagce.gamemaking.tools/
|
|
https://www.gamemaking.tools/forum/categories/obshagce/
|
|
… blueberrysoft.ryliejamesthomas.net/groups/obshagce.html
|
|
https://tildegit.org/rjt/obshagce/
|
|
|
|
----------- ----------- ----------- ----------- -----------
|
|
|
|
Hi!
|
|
|
|
This is a little framework / template thing I'm working on
|
|
for building hypermedia adventure games--simple
|
|
collections of HTML and CSS and whatever media you want to
|
|
stick in there.
|
|
|
|
I've tried to keep things easy to understand, so avoided
|
|
JavaScript and any ideas about trying to keep it as one
|
|
page (EVIL). The only thing that's kinda dynamic (?) is
|
|
the status window, which is an iframe. Otherwise each
|
|
board is it's own HTML page with some inline CSS. There's
|
|
a general style sheet (base.css) too.
|
|
|
|
I hope this will encourage people to make more cool,
|
|
personal websites. And explore the possabilites of a
|
|
JS-free WWW.
|
|
|
|
----------- ----------- ----------- ----------- -----------
|
|
Goals
|
|
----------- ----------- ----------- ----------- -----------
|
|
|
|
- Easy to read markup (semantic, and with comments).
|
|
- Be a useful learning tool for HTML and CSS.
|
|
- No JavaScript
|
|
(but feel free to fork if you're into that).
|
|
- Help show games can use simple technologies.
|
|
- Promote cool, simple hypermedia.
|
|
|
|
----------- ----------- ----------- ----------- -----------
|
|
Project structure
|
|
----------- ----------- ----------- ----------- -----------
|
|
|
|
/
|
|
├─ boards/
|
|
│ ├── ...
|
|
│ └── ...
|
|
├─ images/
|
|
│ ├── ...
|
|
│ └── ...
|
|
├─ messages/
|
|
│ ├── ...
|
|
│ └── ...
|
|
├─ sounds/
|
|
│ ├── ...
|
|
│ └── ...
|
|
├─ base.css
|
|
├─ games_list.txt
|
|
├─ index.html
|
|
└─ readme.txt
|
|
|
|
----------- ----------- ----------- ----------- -----------
|
|
|
|
So a game might work like this:
|
|
You make a title/intro screen in index.html
|
|
This points to HTML files in 'boards'
|
|
These files have graphics and text and things you can
|
|
click on in the cells on the right (what I call the map)
|
|
and these open text, or HTML, or sounds, or whatever in
|
|
the message widow in the lower left.
|
|
You can also add some stuff to describe what is 'seen',
|
|
'smelt', 'touched' etc., under the icons for those senses.
|
|
|
|
----------- ----------- ----------- ----------- -----------
|
|
Style Sheet Stuffs
|
|
----------- ----------- ----------- ----------- -----------
|
|
|
|
Trying to explain the purpose / use of the IDs and
|
|
classes used.
|
|
|
|
Most of the CSS is in base.css, but some is kept in the
|
|
HTML files so you can easily tweak things per-board, the
|
|
colours, for example. Some CSS related to formating
|
|
messages is in messages.css.
|
|
|
|
IDs are to be used only once per page, but you can add
|
|
classes wherever needed. You can even add multiple classes
|
|
to an element.
|
|
|
|
----------- ----------- ----------- ----------- -----------
|
|
|
|
Here's a diagram to show which section IDs and classes
|
|
are effecting on the board pages.
|
|
|
|
# signifies an ID
|
|
. signifies a class
|
|
|
|
┌───────────────────────────────────────────────────────┐
|
|
│ #board │
|
|
│ │
|
|
│ ┌────────────────────────┐ ┌────────────────────────┐ │
|
|
│ │ #perception .window │ │ #view .window │ │
|
|
│ │ │ │ │ │
|
|
│ │┌──────────────────────┐│ │┌──────────────────────┐│ │
|
|
│ ││ #senses ││ ││ #map ││ │
|
|
│ ││ ││ ││ ││ │
|
|
│ ││┌───┬───┬───┬───┬───┐ ││ ││┌───┬───┬───┬───┬───┐ ││ │
|
|
│ │││ │ .icon │ │ ││ │││ │ │ │ │ │ ││ │
|
|
│ ││├───┼───┼───┼───┼───┤ ││ ││├───┼───┼───┼───┼───┤ ││ │
|
|
│ │││ .description │ ││ │││ │ │ │ │ │ ││ │
|
|
│ ││└───┴───┴───┴───┴───┘ ││ ││├───┼───┼───┼───┼───┤ ││ │
|
|
│ │└──────────────────────┘│ │││ │ .cell │ │ ││ │
|
|
│ └────────────────────────┘ ││├───┼───┼───┼───┼───┤ ││ │
|
|
│ ┌────────────────────────┐ │││ │ │ │ │ │ ││ │
|
|
│ │ #message .window │ ││├───┼───┼───┼───┼───┤ ││ │
|
|
│ │ │ │││ │ │ │ │ │ ││ │
|
|
│ │ │ ││└───┴───┴───┴───┴───┘ ││ │
|
|
│ │ │ │└──────────────────────┘│ │
|
|
│ └────────────────────────┘ └────────────────────────┘ │
|
|
└───────────────────────────────────────────────────────┘
|
|
----------- ----------- ----------- ----------- -----------
|
|
IDs:
|
|
|
|
'board' For all elements on the game boards.
|
|
'titlescreen' For all elements on the titlescreen.
|
|
|
|
'view' The window containing the map.
|
|
'map' The actual map grid.
|
|
|
|
'perception' The window containing sense information.
|
|
'senses' The grid containing the icons and
|
|
descriptions for the senses.
|
|
|
|
'message' The window where messages appear.
|
|
|
|
'credit' For credits on the titlescreen.
|
|
'notes' For the notes section on the titlescreen.
|
|
'splash' For titlescreen images. You may or may
|
|
not want the border.
|
|
|
|
----------- ----------- ----------- ----------- -----------
|
|
Classes:
|
|
|
|
'cell' The individual cells that contain map
|
|
content.
|
|
|
|
'icon' The cells that contain the sense icons.
|
|
|
|
'description' The cells that contain the sense
|
|
descriptions.
|
|
|
|
'title' Title above game board. Game title or
|
|
board title or ???.
|
|
|
|
'window' References elements that make up the main
|
|
three windows, but exludes their contents.
|
|
|
|
Also included at the end of 'base.css' are some clases you
|
|
can apply for graphic effects. For example alignment and
|
|
rotation.
|
|
|
|
'align_*' For easily alligning things in cells.
|
|
|
|
'empty' To make a cell as empty. It removes the
|
|
border, so if used in the main game board
|
|
the cell will not be indented.
|
|
|
|
'no_scale' For images you don't want to scale to fill
|
|
a cell.
|
|
|
|
'rotate_*' For rotating elements, in 90 degree
|
|
increments.
|
|
|
|
'flip_*' Flips the element on the vertical or
|
|
horizonal axis.
|
|
|
|
'shape_*' Changes elements' shape.
|
|
|
|
And some classes for animated effects :)
|
|
These are disabled if a user has set their OS or browser
|
|
to reduce animation.
|
|
|
|
'blink' Replicates the old <blink> tag. You can
|
|
easily set the speed to your liking.
|
|
|
|
'cycle' A colour-cycling effect. Quickly cycles
|
|
through a set of colours. Colours are easy
|
|
enough to change. If you want to add more
|
|
you'll need to add more steps (the numbers
|
|
with the percent signs).
|
|
|
|
'flipanim_*' Repeatedly flips an element (like an image)
|
|
for a simple animation effect. Like a
|
|
downwards walking animation in an NES RPG.
|
|
|
|
'rotateanim_*' Repeatedly rotates an element in 90° steps.
|
|
|
|
----------- ----------- ----------- ----------- -----------
|
|
HTML
|
|
|
|
<base target="message_frame">
|
|
This makes links open thing in the message
|
|
window unless told otherwise. Other targets
|
|
you might find useful are
|
|
_self to open in the same window, and
|
|
_blank to open in a new tab or window depending
|
|
on how the person's browser is set-up.
|
|
|
|
----------- ----------- ----------- ----------- -----------
|
|
----------- ----------- ----------- ----------- -----------
|