This is a documentation for Board Game Arena: play board games online !

Tutorial reversi: 두 판 사이의 차이

Board Game Arena
둘러보기로 이동 검색으로 이동
편집 요약 없음
28번째 줄: 28번째 줄:
Now, let's make it appears on our game:
Now, let's make it appears on our game:
* upload board.jpg in your "img/" directory.
* upload board.jpg in your "img/" directory.
* edit "reversi_reversi.tpl" to add a <div> for your board
* edit "reversi_reversi.tpl" to add a 'div' for your board:


<nowiki>
<nowiki>
<div id="board">
<div id="board">
</div>
</div>
</nowiki>
</nowiki>
 
* edit your reversi.css file to transform it into a visible board:
 
#board {
    width: 536px;
    height: 528px;
    background-image: url('../../img/reversi/board.jpg');
}

2012년 11월 24일 (토) 14:33 판

Introduction

Using this tutorial, you can build a complete working game on BGA environment: Reversi game.

Before reading this tutorial, you must:

Create your first game

With the initial skeleton of code provided initially, you can already start a game from the BGA Studio. For now, we are going to work with 1 player only. Most of the time this is simpler to proceed with only one player during the early phase of development of your game, as it's easy and fast to start/stop games.

Thus, you can start a "Reversi" game, and arrive on a void, empty game. Yeah.

Let it look like Reversi

It is always a good idea to start with a little bit of graphic work. Why? Because this helps to figure out how the final game will be, and issues that may appear later.

Be careful during designing the layout of your game: you must always keep in mind that players with a 1024px screen width must be able to play. Usually, it means that the width of the play area can be 750px (in the worst case).

For Reversi, it's useless to have a 750x750px board - much too big, so we choose this one which fit perfectly (536x528):

Board.jpg

Note that we are using a jpg file. Jpg are lighter than png, then faster to load. Later we are going to use PNGs for discs for transparency purpose.

Now, let's make it appears on our game:

  • upload board.jpg in your "img/" directory.
  • edit "reversi_reversi.tpl" to add a 'div' for your board:

<div id="board"> </div>

  • edit your reversi.css file to transform it into a visible board:
#board {
   width: 536px;
   height: 528px;
   background-image: url('../../img/reversi/board.jpg');
}