Developing TicToe HTML5/User interface mock: Difference between revisions
imported>Hendrik Brummermann |
imported>Hendrik Brummermann No edit summary |
||
| Line 48: | Line 48: | ||
== Login == |
== Login == |
||
{{TODO|Design |
{{TODO|Design login screen, similar to https://stendhalgame.org/account/login.html }} |
||
== Account creation == |
== Account creation == |
||
{{TODO|Design account creation similar to https://stendhalgame.org/account/create-account.html}} |
|||
{{TODO|Design hall of fame}} |
|||
== Avatar outfit selection == |
== Avatar outfit selection == |
||
{{TODO|Design outfit selection based on hair, head, clothes and body shape, similar to the character creation page of Stendhal}} |
|||
{{TODO|Design hall of fame}} |
|||
Revision as of 19:17, 17 December 2011
Development log of TicToe HTML5
After we spent some thought on the game design in the previous article, we should now design a rough user interface. Designing a sketch up of the user interface before the complex logic, has the huge advantage that it helps in communication. It's important not to raise too high expectations at this point because a good user interface may look to non-developers as a finished application, although most of the work still remains to be done.
We will break the user interface into the following parts:
The main game screen
We start with the main screen. This is the most important part of the game.
Entities
One player uses crosses 
to mark their field and the other player uses noughts 
. Those tokens are placed or drawn on a 3 x 3 game board.
In a later version we will add player avatars that will stand left and right of the game board.
Mock of the main game screen
With these images, we create the first mock of the main game screen:
For the game we use a green background, until we have some nice grass sprites covering the ground later. Then we create img-Tags to load the game board and tokens. We use CSS positing to place the tokens at the correct positions on top of the game board:
<source lang="html4strict"> <!DOCTYPE html>
<html> <head><title>TicToe</title></head>
<body style="background-color:#0A0">
<img src="/images/board.png" style="position: absolute; z-index: 0; left: 50px; top: 50px"> <img src="/images/x.png" style="position: absolute; z-index: 1; left: 82px; top: 82px"> <img src="/images/o.png" style="position: absolute; z-index: 1; left: 50px; top: 50px">
</body>
</html> </source>
Hall of Fame
TODO: Design hall of fame
Login
TODO: Design login screen, similar to https://stendhalgame.org/account/login.html
Account creation
TODO: Design account creation similar to https://stendhalgame.org/account/create-account.html
Avatar outfit selection
TODO: Design outfit selection based on hair, head, clothes and body shape, similar to the character creation page of Stendhal