rjt
/
obshagce
1
0
Fork 0
Code Issues 3 Pull Requests Releases Activity

Forum link

This commit is contained in:
rjt 2022-05-31 06:41:16 +00:00
parent 04b2e39a1c
commit 1dd4375de3
1 changed files with 216 additions and 215 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

431
readme.txt
View File

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