パーティーとは
ポケモンでは、ゲーム・アニメ共に最大６匹のパートナーポケモンと旅をすることができます。７匹以上は持ち歩くことができず、ボックスに転送されてしまうという仕組みです。そして、その６匹のパートナーポケモンの構成をパーティーと呼んでいます。
現在のPHPポケモンでは１匹のポケモンしか管理できないため、これを６匹のパートナーを連れていくことができるように機能増設をしていきましょう。
トレーナーの作成
パーティーを編成するためには、その親となるトレーナーが必要です。道具やお金、ジムバッチを保有するのも、ポケモンではなくトレーナーであるあなたです。なので、その管理ようにもトレーナーをホーム画面に表示させましょう。
トレーナーは初代主人公であるレッドを、ひこちゃんず様よりお借りします。
ひこちゃんず
原作では、戦闘開始時にトレーナーの後ろ姿が登場して、ポケモンを繰り出すという演出もあります。こちらは後々実装していきます。
ポケモン一覧
それでは、パーティーの実装についてです。現在は１匹しか所有できませんが、その枠を６匹分に増やすため、ポケモンのインスタンスを配列にいれて管理しましょう。
初期画面用コントローラー
/**
* アクションに合わせた分岐
* @return void
*/
private function branch()
{
switch ($_POST['action'] ?? '') {
/**
* ポケモンの選択
*/
case 'select_pokemon':
// ポケモンを生成して引き継ぎデータをセッションに格納
$class = $_POST['pokemon'];
if(!isset($this->pokemon_list[$class])){
setMessage('選択されたポケモンは選ぶことが出来ません');
break;
}
$pokemon = new $class(5);
$pokemon->setPosition();
$serialize = $this->serializeObject($pokemon);
$_SESSION['__data']['pokemon'] = $serialize;
$_SESSION['__data']['party'] = [$serialize];
// ホーム画面へ移管
$_SESSION['__route'] = 'home';
header("Location: ./", true, 307);
exit;
break;
/**
* アクション未選択 or 実装されていないアクション
*/
default:
// 初期化
$_SESSION = [];
$_SESSION['__token'] = bin2hex(openssl_random_pseudo_bytes(32));
break;
}
}
これにより、ポケモンのプロパティは不要となりますが、こちらを無くしてしまうと全画面で整合性を取る必要があるため、一旦は別でパーティーの枠を用意しました。エラーが出てしまわないように、ホーム・バトル両画面でもパーティーのセッションとプロパティを用意・引き継ぎ処理をしておきましょう。
次に、パーティーの一覧を表示するためのモーダルをホーム画面に作成します。
パーティー一覧用モーダル（/Resources/Partials/Home/Modals/party.php）
<!-- Modal -->
<div class="modal fade" id="party-modal" tabindex="-1" role="dialog" aria-labelledby="party-modal-title" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="party-modal-title">手持ちポケモン</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<?php foreach($controller->getParty() as $order => $party): ?>
<div class="row">
<div class="col-3 text-center">
<img src="/Assets/img/pokemon/dots/mini/<?=get_class($party)?>.gif"
alt="<?=$party->getName()?>"
style="cursor:pointer;"
data-toggle="modal"
data-dubble_modal="true"
data-target="#pokemon-details-modal<?=$order?>">
</div>
<div class="col-9">
<div class="row">
<div class="col-12">
<?=$party->getNickname()?>
</div>
</div>
<div class="row">
<div class="col-10">
<div class="progress" style="height:4px;">
<div class="progress-bar bg-<?=$party->getRemainingHp('color')?>"
role="progressbar"
style="width:<?=$party->getRemainingHp('per')?>%;"
aria-valuenow="<?=$party->getRemainingHp()?>"
aria-valuemin="0"
aria-valuemax="<?=$party->getStats('HP')?>">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-8">
<?=$party->getRemainingHp()?> / <?=$party->getStats('HP')?>
</div>
<div class="col-4">
Lv.<?=$party->getLevel()?>
</div>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
</div>
二重モーダルの実装
モーダル内でポケモン一覧を表示するとなれば、そこから詳細を表示するためには追加でもう一枚のモーダルを起動する必要があります。ですが、二重モーダルはbootstrapのそのままの機能では実装することができません。
なので、js側に二重モーダルをキレイに表示させるための処理を追加します。
共通JS（/Public/Assets/js/common.js）
/**
* 二重モーダルを正常に表示するための重ね処理
*
* @function on show modal
*/
var dubbleModalInit = function() {
$(document).ready(function() {
$('[data-dubble_modal="true"]').on("show.bs.modal", function(e) {
var currentModal = $(e.currentTarget);
var zIndex = 1040 + 10 * $(".modal:visible").length;
currentModal.css("z-index", zIndex);
setTimeout(function() {
$(".modal-backdrop")
.not(".modal-stack")
.css("z-index", zIndex - 1)
.addClass("modal-stack");
}, 0);
});
});
}
これで、二重モーダルを起動させるボタンに対してdata-dubble_modalというパラメータをtrueにして付与すれば、二重モーダルも崩れず表示させることが可能になります。
それでは、トレーナーとパーティーの一覧を確認してみましょう。
二重モーダルがレイアウト崩れなく正しく表示され、正常機能していることがわかりますね。
これでパーティー機能のトレーナーの初期準備が完了です。
まとめ
いかがだったでしょうか。
今回のPHPポケモンでは、パーティーの実装方法についてご紹介しました。
まだ初期準備となりますが、ここからパーティーを想定した仕組みを作りこみ、アイテムを実装することで、複数のポケモンを使えるようになります。
ゲームづくりに興味がある人や、プログラミング学習に取り組んでいる人は、ぜひ参考にしてみてくださいね。
