Forum link
This commit is contained in:
parent
04b2e39a1c
commit
1dd4375de3
431
readme.txt
431
readme.txt
|
|
@ -1,215 +1,216 @@
|
|||
----------- ----------- ----------- ----------- -----------
|
||||
|
||||
OBSHAGCE
|
||||
|
||||
The Official Blueberry Soft Hypermedia Adventure Game
|
||||
Construction Engine
|
||||
|
||||
----------- ----------- ----------- ----------- -----------
|
||||
|
||||
https://obshagce.gamemaking.tools/
|
||||
… 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.
|
||||
|
||||
----------- ----------- ----------- ----------- -----------
|
||||
----------- ----------- ----------- ----------- -----------
|
||||
----------- ----------- ----------- ----------- -----------
|
||||
|
||||
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.
|
||||
|
||||
----------- ----------- ----------- ----------- -----------
|
||||
----------- ----------- ----------- ----------- -----------
|
||||
|
|
|
|||
Loading…
Reference in New Issue