プログラミング

ビジュアル作り込み編(序) PHPポケモン66

PHP PHPポケモン ポケモン
ビジュアル作り込み編(序) PHPポケモン66

ビジュアルの作り込み

最近は内部の作り込みが多かったので、今回のPHPポケモンでは見た目を少しだけ作り込んでいきます。とはいっても、機能自体がそこまで揃っていないため、あくまで仮の見た目となります。

ある程度見た目が整っていると、プレイする側のモチベーションや楽しみも増えると思ったので、こちらは並行して息抜き程度に実施していきます。

 

メニューバー

まずはメニューバーから見ていきましょう。現在はポケモンセンターやバトル画面への移行など、必要に応じたメニューがセットされていますが、せっかくなので本家(初代ポケモン)を参考に作成して、必要なメニューを用意していきます。

 

 

初代のメニューには、こちらの7項目があります。「とじる」は不要のため、こちらをリセットに置き換えたメニューバーを用意します。

※現在開発段階のため、バグが発生した場合を考慮してリセットボタンは必須となっています

 

 

それらしくなってきましたね。現在こちらのメニューバーで機能しているものは「ポケモン」と「リセット」だけですが、ビジュアルとして用意することで未実装なものを可視化させました。

  

建物の設営

メニューバーを原作通りに置き換えたことにより、ポケモンセンターやバトルの項目がなくなりました。なので、こちらは建物として設置していきます。 

※現段階での想定では、フィールドの作り込みが最も困難になると考えています。オブジェクト自体を動かしたり、フィールドを描画することはJSで比較的簡単に再現できそうですが、そこにアクションを設置したり、建物内のパーツを準備することまで考えると、かなり険しい道程ではないかと想定しています。

 

もしゲームづくりに向いている簡易的に導入できるようなライブラリがあれば、ぜひお問い合わせよりご連絡ください。

  

ポケモンセンター

それではまず、ポケモンセンターを用意します。

こちらは色々巡回して素材をお借りしてきました。こちらをボタンとして配置することで、ポケモンセンターの役割をもたせます。

ただ、ポケモンセンターに入ってジョーイさんと会話するなどといった機能は持たせず、今まで通りボタンを押したら手持ちのポケモンのHPが全回復するといったものになります。

  

フレンドリーショップ

ポケモンセンターと同じ要領で、フレンドリーショップを用意します。

現在アイテム機能が存在していないため、こちらはただの置物です。ですが、あくまで見た目をそれらしくするためだけに用意しました。素材はポケモンセンターと同じように色々と巡回して探してきました。

  

リモートサブミットの簡易化

建物などを配置すると、至る場所へフォームを設置する必要があります。それは管理するのも大変なので、フッター部分に用意しているリモートフォームを使って、どこからでも簡単にアクセスできるようにしましょう。

 

共通JS/Public/Assets/js/common.js
/**
 * リモートフォームへのサブミット
 *
 * @function on show modal
 */
var submitRemoteInit = function() {
    $('[data-submit_remote]').on('click', function(){
        $("#remote-form-action").val($(this).data('submit_remote'))
        $('form#remote-form').submit();
    });
}

 

data属性として、data-submit_remoteを持たせることで、そのノード自体にリモートフォームへのアクセスを持たせました。こちらにactionの値をセットすることで、ボタンに合わせてフォームを用意せずとも、簡単にアクションを実行することができます。

以下ポケモンセンターです。

<figure class="btn-action" data-submit_remote="recovery">
    <img src="/Assets/img/building/pokemon-center.png" class="mb-2" alt="ポケモンセンター">
    <p><span class="badge badge-teal">ポケモンセンター</span></p>
</figure>

 

このように、data属性をセットすることで疑似フォーム化させています。

実際に回復の流れを見てみましょう。

 

 

正常にフォームの送信がされていることが確認できました。

これで、他のアクションが実装されても、比較的簡単に設置することが可能です。

 

Sassの導入

ここまでくると、cssの記述量もそこそこ増えてきました。基本的にはbootstrap4に用意されたクラスを組み合わせて実装していますが、今後見た目を整えていく上では避けて通れないポイントです。

なので、こちらは開発をスムーズにするためにもSassを導入します。

 

node-sassの活用

開発者はmacを使っているため、標準でrubyが搭載されています。なので、sassをインストールするだけでコンパイルできる環境は整います。windowsで開発を行なっている人は、ruby公式からインストールして、sassを導入してください。 

 

ただ、ファイルを作成・編集するたびにコンパイルのコマンドを打つのも面倒なので、ここはsassscss)ファイルの監視下をします。今回はnpmnode-sassを利用しました。一例として以下の記事をご参考下さい。

 

昔、gulpを使った監視下をしていましたが、明らかにnode-sassのほうが環境準備が簡単だったので、もしこれから導入を検討している方がいればこちらをオススメします。

ただ、使い込んでいないため「あくまで導入が簡単だった」という点での評価です。

 

これできっとPHPポケモンの開発も順調に進むことでしょう。

 

まとめ

いかがだったでしょうか。

今回のPHPポケモンでは、簡易的なビジュアルの作り込みと、それに合わせてsassの導入方法を簡単にご紹介しました。

WEBプログラミングに興味があるかたは、ぜひ参考にしてみてくださいね。

 

注目の記事

SNS拡散力アップ!PHPでOG画像付きリッチURLを自作する方法【Curl → Opengraph】
プログラミング
PHP,WordPress
SNS拡散力アップ!PHPでOG画像付きリッチURLを自作する方法【Curl → Opengraph】

  ブログやHPにサイトのURLをただ貼り付けても、どんなページなのか一目でわからないのでなかなか思うようにアクセスに繋がりません。 ですが、毎回のようにURL先の画像を準備したり、説明文を設定するのも大変ですし、ページタイトルや画像が差し替わってしまうことも考えられます。   今回はそういった手間...

ピカチュウから学ぶオブジェクト指向 〜進化編〜 7
プログラミング
PHP,PHPポケモン,オブジェクト指向,ポケモン
ピカチュウから学ぶオブジェクト指向 〜進化編〜 7

  ※前回(第6回)で意味不明な場所に空変数が入っており、ステータスが一部しか出力できないという問題がありました。修正しています。犯人は「$stats = [];」です。(GetTrait.php)   今回はポケモンのゲームでは欠かせない、楽しみの一つとなる「進化システム」を導入していきます。これからPHPポ...

データ軽量化編 β版へ向けて  PHPポケモン 90
プログラミング
PHP,PHPポケモン,ポケモン
データ軽量化編 β版へ向けて PHPポケモン 90

β版の実装に向けて 大型アップデートにより、ある程度機能改善や実装箇所も増えてきましたが、それと同時に次の段階への移行が本格的に見えてきました。それがβ版です。   PHPポケモンは2020年12月現在α版となっており、完全な試作段階のWEBアプリケーションです。セーブ機能はなく、セッションの有効期...

ピカチュウから学ぶオブジェクト指向 〜レベルアップ編〜 5
プログラミング
PHP,PHPポケモン,オブジェクト指向,ポケモン
ピカチュウから学ぶオブジェクト指向 〜レベルアップ編〜 5

  第3回でレベルシステムを導入し、第4回では経験値システムの導入をしたので、今回はそれを合わせたレベルアップのシステムを導入します。 第1回から作成しているコードを使用しているので、もし最初から学習したい人は第1回の入門編をご覧ください。     レベルアップシステムの導入   レベル...

ひとのものをとったらどろぼう!編 PHPポケモン 99
プログラミング
PHP,PHPポケモン,ポケモン
ひとのものをとったらどろぼう!編 PHPポケモン 99

ひとの ものを とったら どろぼう! ポケモンの中でも有名なセリフの1つです。モンスターボールを投げることでポケモンを捕まえることができますが、既に別トレーナーが所有しているポケモンを捕まえることはできません。 初代から、トレーナー戦でモンスターボールを投げると「ひとの ものを とったら どろぼう!...

連続の技習得編 オブジェクトをセッションへ格納 PHPポケモン57
プログラミング
PHP,PHPポケモン,ポケモン
連続の技習得編 オブジェクトをセッションへ格納 PHPポケモン57

セッション経由でのオブジェクト引き継ぎ 技習得の処理が整ってきたので、ここで連続技習得・連続レベルアップ時にも問題なく動作するように作り込んでいきます。ですが、現状のモーダルをレスポンスやメッセージと同様に、そのまま引き継いだとしてもエラーが発生します。 その原因がセッション経由でのオブジェク...

わざマシン編 習得 PHPポケモン105
プログラミング
PHP,PHPポケモン,ポケモン
わざマシン編 習得 PHPポケモン105

わざマシンによる技習得 前回、わざマシンのアイテムクラスを作成したので、今回は実際に使用するまでの処理を作成していきます。 まずは、アイテムクラスに使用時の処理(effectsメソッド)を増設しましょう。   わざマシン01(/Classes/Item/ItemTM01.php) <?php require_once(root_path('Classes').'...

反動技編(はかいこうせん・とびひざげり)PHPポケモン40
プログラミング
PHP,PHPポケモン,ポケモン
反動技編(はかいこうせん・とびひざげり)PHPポケモン40

反動技とは ポケモンでは反動技というものがあります。反動によっても様々で、現在の仕組みのままでも実装可能なものや、新たに処理が必要なものまであります。なので、一律で反動技という同じ処理は出来ません。  反動技(ポケモンwiki) https://wiki.ポケモン.com/wiki/反動技 反動技(はんどうわざ...

カテゴリ

SEO対策 イベント デザイン ネットワーク ビジネスモデル フリーランス プログラミング マーケティング ライティング 動画編集 雑記

タグ

5G Adobe AfterEffects AI ajax amazon Animate api artisan atom Automator AWS Bluetooth CSS CVR description EC-CUBE4 ECショップ ESLint Facebook feedly foreach function Google Google AdSense Honeycode htaccess HTML IEEE 802.11ax Illustrator Instagram IoT JavaScript jQuery jQuery UI keyword LAN Laravel Linux MacBook MAMP meta MLM MySQL NoCode note OS OSI参照モデル Paypal Photoshop PHP phpMyAdmin PHPポケモン PremierePro rss SEO SEO対策 Sequel Pro Skype SNS SSH Symfony TCP/IP title Toastr Trait Twig Twitter UCC V系 WAN WebSub Wi-Fi wiki Windows WordPress XAMPP xml Xserver YouTube YouTuber Zoom アーティスト アウトプット アクセス層 アニメーション アフィリエイト イーブイ インターネット インプット エンジニア オブジェクト指向 お金配り クリック単価 クリック数 コミュニケーション能力 コロナ コンサルティング サムネイル システムエンジニア スタートアップ スタイルシート スパム データベース ディープフェイク デザイナー デザイン テレワーク ナンパ ニュース ネットワークモデル ノマドワーク バナー ピカチュウ ビジネス フィード フリーランス ブロガー ブログ プログラマー プログラミング プログラミング学習 プログラミング教育 プロトコル ホームページ制作 ポケモン マークアップ マーケティング メール リモートワーク レンダリング 三井住友 三宮 仕事依頼 児童デイ 児童デイサービス 児童発達支援 公開鍵 初心者 助成金 勉強法 営業 広告 広告収入 必勝マニュアル 放課後等デイサービス 朝活 楽天 深層学習 無線LAN 独立 神戸 福祉 秘密鍵 翻訳 自己啓発 英語 見積書 計算機 読書 起業 迷惑メール 配列 銀の弾丸 集客 雑学力