Developing TicToe HTML5/User interface mock: Difference between revisions
Jump to navigation
Jump to search
Content deleted Content added
imported>Hendrik Brummermann |
imported>Hendrik Brummermann No edit summary |
||
| (23 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
{{Navigation TicToe HTML5}} |
<noinclude>{{Navigation TicToe HTML5}}__NOTOC__</noinclude> |
||
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. |
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 == |
|||
| ⚫ | |||
== Entities == |
|||
One player uses crosses [[File:Token blue x.png|The token used by one of the players.]] to mark their field and the other player uses noughts [[File:Token red o.png|The token used by the other player.]]. Those tokens are placed or drawn on a 3 x 3 game board. |
One player uses crosses [[File:Token blue x.png|The token used by one of the players.]] to mark their field and the other player uses noughts [[File:Token red o.png|The token used by the other player.]]. Those tokens are placed or drawn on a 3 x 3 game board. |
||
| Line 17: | Line 12: | ||
In a later version we will add player avatars that will stand left and right of the 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: |
With these images, we create the first mock of the main game screen: |
||
| Line 42: | Line 37: | ||
</source> |
</source> |
||
== Adding a caption == |
|||
In a traditional game of Tic Tac Toe, which is played using pen and paper, it is obvious who is player. But in an Internet game, it is important to show the names of the players. And it may be helpful to mark the player, who's turn it is. |
In a traditional game of Tic Tac Toe, which is played using pen and paper, it is obvious who is player. But in an Internet game, it is important to show the names of the players. And it may be helpful to mark the player, who's turn it is. |
||
| Line 54: | Line 49: | ||
</style> |
</style> |
||
<div style="border: 1px solid #FFF; padding: 0 2em 0 2em; position: absolute; z-index: 0; left: 180px; top: 30px"> |
<div style="border: 1px solid #FFF; padding: 0 2em 0 2em; position: absolute; z-index: 0; left: 180px; top: 30px"> |
||
<p><img src="/images/x.png"> Fritz (turn)</p> |
|||
<p><img src="/images/o.png"> Peter</p> |
|||
</div> |
</div> |
||
</source> |
</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}} |
|||