Tutorial gomoku - Гісторыя версій

Tutchek: Removed navigation - too wide images on this page make problems..

2020-04-15T21:14:49Z

Removed navigation - too wide images on this page make problems..

← Папярэдн. версія		Версія ад 23:14, 15 красавіка 2020
Радок 1:		Радок 1:
	~~{{Studio_Framework_Navigation}}~~

	This tutorial will guide you through the basics of creating a simple game on BGA Studio, through the example of [http://en.wikipedia.org/wiki/Gomoku '''Gomoku'''] (also known as Gobang or Five in a Row).		This tutorial will guide you through the basics of creating a simple game on BGA Studio, through the example of [http://en.wikipedia.org/wiki/Gomoku '''Gomoku'''] (also known as Gobang or Five in a Row).

Tutchek: Added navigation

2020-04-15T21:13:57Z

Added navigation

← Папярэдн. версія		Версія ад 23:13, 15 красавіка 2020
Радок 1:		Радок 1:
			{{Studio_Framework_Navigation}}

	This tutorial will guide you through the basics of creating a simple game on BGA Studio, through the example of [http://en.wikipedia.org/wiki/Gomoku '''Gomoku'''] (also known as Gobang or Five in a Row).		This tutorial will guide you through the basics of creating a simple game on BGA Studio, through the example of [http://en.wikipedia.org/wiki/Gomoku '''Gomoku'''] (also known as Gobang or Five in a Row).

Een: /* Add some counters in the player panels */

2019-06-21T11:28:26Z

Add some counters in the player panels

← Папярэдн. версія		Версія ад 13:28, 21 чэрвеня 2019
Радок 474:		Радок 474:

	== Add some counters in the player panels ==		== Add some counters in the player panels ==

	~~[[File:Gomoku tuto7.png]]~~

	Edit .tpl to create a template for your counters.		Edit .tpl to create a template for your counters.
Радок 585:		Радок 583:
	this.updateCounters(notif.args.counters);		this.updateCounters(notif.args.counters);
	</pre>		</pre>

			You now have a working counter!

			[[File:Gomoku tuto7.png]]

	== Implement rules and end of game conditions ==		== Implement rules and end of game conditions ==

Een: /* Add some informative counters in the player panels */ Image

2019-06-21T11:27:28Z

Add some informative counters in the player panels: Image

← Папярэдн. версія		Версія ад 13:27, 21 чэрвеня 2019
Радок 473:		Радок 473:
	[[File:Gomoku tuto5.png]]		[[File:Gomoku tuto5.png]]

	== Add some ~~informative~~ counters in the player panels ==		== Add some counters in the player panels ==

			[[File:Gomoku tuto7.png]]

	Edit .tpl to create a template for your counters.		Edit .tpl to create a template for your counters.
Радок 583:		Радок 585:
	this.updateCounters(notif.args.counters);		this.updateCounters(notif.args.counters);
	</pre>		</pre>


	== Implement rules and end of game conditions ==		== Implement rules and end of game conditions ==

Een: Player panel counters instructions

2019-06-21T11:20:21Z

Player panel counters instructions

← Папярэдн. версія		Версія ад 13:20, 21 чэрвеня 2019
Радок 472:		Радок 472:

	[[File:Gomoku tuto5.png]]		[[File:Gomoku tuto5.png]]

			== Add some informative counters in the player panels ==

			Edit .tpl to create a template for your counters.

			<pre>
			var jstpl_player_board = '\<div class="cp_board">\
			<div id="stoneicon_p${id}" class="gmk_stoneicon gmk_stoneicon_${color}"></div><span id="stonecount_p${id}">0</span>\
			</div>';
			</pre>

			Edit .js->setup() to setup the player panels with this extra information

			<pre>
			// Setting up player boards
			for( var player_id in gamedatas.players )
			{
			var player = gamedatas.players[player_id];

			// Setting up players boards if needed
			var player_board_div = $('player_board_'+player_id);
			dojo.place( this.format_block('jstpl_player_board', player ), player_board_div );
			}
			</pre>

			Add some styles in your .css

			<pre>
			.gmk_stoneicon {
			width: 14px;
			height: 14px;
			display: inline-block;
			position: relative;
			background-repeat: no-repeat;
			background-image: url( 'img/stone_icons.png');
			background-position: -28px 0px;
			margin-top: 4px;
			margin-right: 3px;
			}

			.gmk_stoneicon_000000 {
			background-position:0px 0px
			}

			.gmk_stoneicon_ffffff {
			background-position:-14px 0px
			}

			.cp_board {
			clear: both;
			}
			</pre>

			In your .game.php, create a function to return your game counters

			<pre>
			/*
			getGameCounters:

			Gather all relevant counters about current game situation (visible by the current player).
			*/
			function getGameCounters($player_id) {
			$sql = "
			SELECT
			concat('stonecount_p', cast(p.player_id as char)) counter_name,
			case when p.player_color = 'white' then 180 - count(id) else 181 - count(id) end counter_value
			FROM (select player_id, case when player_color = 'ffffff' then 'white' else 'black' end player_color FROM player) p
			LEFT JOIN intersection i on i.stone_color = p.player_color
			GROUP BY p.player_color, p.player_id
			";
			if ($player_id != null) {
			// Player private counters: concatenate extra SQL request with UNION using the $player_id parameter
			}

			return self::getNonEmptyCollectionFromDB( $sql );
			}
			</pre>

			Return your game counters in your .game.php->getAllDatas()

			<pre>
			// Counters
			$result['counters'] = $this->getGameCounters($current_player_id);
			</pre>

			And pass them in any notification that needs to update them

			<pre>
			// Notify all players
			self::notifyAllPlayers( "stonePlayed", clienttranslate( '${player_name} dropped a stone ${coordinates}' ), array(
			'player_id' => $player_id,
			'player_name' => self::getActivePlayerName(),
			'coordinates' => $this->getFormattedCoordinates($coord_x, $coord_y),
			'coord_x' => $coord_x,
			'coord_y' => $coord_y,
			'color' => $color,
			'counters' => $this->getGameCounters(self::getCurrentPlayerId())
			) );
			</pre>

			Finally, in your .js->setup() and notification handler function call respectively

			<pre>
			this.updateCounters(gamedatas.counters);
			</pre>

			and

			<pre>
			this.updateCounters(notif.args.counters);
			</pre>


	== Implement rules and end of game conditions ==		== Implement rules and end of game conditions ==

Coin-coin le canapin: /* You will start from our 'emtpy game' template */

2015-07-21T11:43:08Z

You will start from our 'emtpy game' template

← Папярэдн. версія		Версія ад 13:43, 21 ліпеня 2015
Радок 1:		Радок 1:
	This tutorial will guide you through the basics of creating a simple game on BGA Studio, through the example of [http://en.wikipedia.org/wiki/Gomoku '''Gomoku'''] (also known as Gobang or Five in a Row).		This tutorial will guide you through the basics of creating a simple game on BGA Studio, through the example of [http://en.wikipedia.org/wiki/Gomoku '''Gomoku'''] (also known as Gobang or Five in a Row).

	== You will start from our '~~emtpy~~ game' template ==		== You will start from our 'empty game' template ==

	Here is how your games looks by default when it has just been created:		Here is how your games looks by default when it has just been created:

Wucnuc: Moved modifying default player colors to this section

2015-05-11T02:53:33Z

Moved modifying default player colors to this section

← Папярэдн. версія		Версія ад 04:53, 11 мая 2015
Радок 458:		Радок 458:
	},		},
	</pre>		</pre>

			Finally, make sure to modify the default colors for players to white and black

			$default_colors = array( "000000", "ffffff", );

	The basic game turn is implemented: you can now drop some stones!		The basic game turn is implemented: you can now drop some stones!

Wucnuc: Moved modifying default player colors to the previous section

2015-05-11T02:53:22Z

Moved modifying default player colors to the previous section

← Папярэдн. версія		Версія ад 04:53, 11 мая 2015
Радок 471:		Радок 471:
	== Implement rules and end of game conditions ==		== Implement rules and end of game conditions ==

	Implement specific rules for the game. For example in Gomoku, black plays first. So in .game.php->setupNewGame():		Implement specific rules for the game. For example in Gomoku, black plays first. So in .game.php->setupNewGame(), at the end of the setup make the black player active:

	* modify the default colors for players to white and black

	~~$default_colors = array( "000000"~~, ~~"ffffff", );~~

	* and at the end of the setup make the black player active

	<pre>		<pre>

Wucnuc: .gmk_intersection also requires the stones background image

2015-05-11T02:41:43Z

.gmk_intersection also requires the stones background image

← Папярэдн. версія		Версія ад 04:41, 11 мая 2015
Радок 402:		Радок 402:

	<pre>		<pre>
			.gmk_intersection {
			width: 30px;
			height: 30px;
			position: relative;
			background-image: url( 'img/stones.png' );
			}

	.gmk_stone {		.gmk_stone {
	width: 30px;		width: 30px;
	height: 30px;		height: 30px;
	position: absolute;		position: absolute;
	background-image: url( 'img/stones.png');		background-image: url( 'img/stones.png' );
	}		}

Wucnuc: getFormattedCoordinates is undefined

2015-05-11T02:34:34Z

getFormattedCoordinates is undefined

← Папярэдн. версія		Версія ад 04:34, 11 мая 2015
Радок 333:		Радок 333:

	// Notify all players		// Notify all players
	self::notifyAllPlayers( "stonePlayed", clienttranslate( '${player_name} dropped a stone ${~~coordinates~~}' ), array(		self::notifyAllPlayers( "stonePlayed", clienttranslate( '${player_name} dropped a stone on ${coord_x},${coord_y}' ), array(
	'player_id' => $player_id,		'player_id' => $player_id,
	'player_name' => self::getActivePlayerName(),		'player_name' => self::getActivePlayerName(),
	~~'coordinates' => $this->getFormattedCoordinates($coord_x, $coord_y),~~
	'coord_x' => $coord_x,		'coord_x' => $coord_x,
	'coord_y' => $coord_y,		'coord_y' => $coord_y,