プログラミング

ビジュアル作り込み編(序) 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プログラミングに興味があるかたは、ぜひ参考にしてみてくださいね。

 

注目の記事

システムエンジニアとプログラマーの違いって?仕事内容や必要スキルについてわかりやすく解説します【SE・PG】
プログラミング
システムエンジニアとプログラマーの違いって?仕事内容や必要スキルについてわかりやすく解説します【SE・PG】

  システムエンジニアってどんな仕事? プログラマーとどう違うの?   プログラミング教育が必修化になり、SEやPGの職業が注目された今、この違いについてわからない、教えて欲しいという質問が後を絶ちません。 今回はそういった人たちのために、システムエンジニア(SE)とプログラマー(PG)という職業に...

捕獲処理実装編 PHPポケモン 80
プログラミング
PHP,PHPポケモン,ポケモン
捕獲処理実装編 PHPポケモン 80

捕獲処理の作成 前回モンスターボールのクラスを作成したので、今回は捕獲判定までの一連の処理を仕上げていきます。サービス自体は他のアイテムと一緒にするためItemServiceを呼び出し、その中で使用されたアイテムを判断して分岐を作ります。   バトル中のアイテムサービス(/App/Services/Battle/ItemService.ph...

PHPポケモン「バトルシステム編〜努力値の獲得〜」33
プログラミング
PHP,PHPポケモン,ポケモン
PHPポケモン「バトルシステム編〜努力値の獲得〜」33

努力値の実装 今回はポケモンのやりこみ要素の一つ、努力値システムを導入します。既に努力値の項目は「ピカチュウで学ぶオブジェクト指向」の段階で実装し、ステータス計算にも判定済みですが、肝心な「努力値を獲得する仕組み」自体は出来ていませんでした。なので、バトルシステムも終盤となったこのタイミングで...

熟練者ほど実践するプログラミングが上達する3つの法則
プログラミング
PHP
熟練者ほど実践するプログラミングが上達する3つの法則

  「なかなかプログラミングが上達しない・・・」 「やったことはあるけど覚えられない」   プログラミングを習得しても、勉強と一緒で使っていなければ忘れてしまいます。また、どんどん上達する人や、長い間プログラミングの技術で生計を立てているような熟練者は、日頃からの取り組み方自体が違ってい...

YouTuber・ブロガー必見!知る人ぞ知るサムネイルの重要性とは
デザイン
Facebook,Instagram,Twitter,YouTuber,サムネイル,ブロガー
YouTuber・ブロガー必見!知る人ぞ知るサムネイルの重要性とは

  サムネイルって本当に重要? ブログの場合はフリー画像でもいいんじゃない?   そう考えている人はいませんか? 残念ですが、それは大きな間違いです。サムネイルを作り込むことは非常に重要であり、集客ポイントを拡大させるのはもちろん、ブランディングにもつながるのです。   今回は「知る人ぞ...

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

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

ブログで生活するための7つの道のり 〜収益化と拡散の方法教えます〜
ライティング
Facebook,Google AdSense,Twitter,ノマドワーク
ブログで生活するための7つの道のり 〜収益化と拡散の方法教えます〜

  ブログで生活したい   毎日数時間、ブログを書くだけで生きていける、そんな夢のような生活を実現させたいと思い描く人は多いですが、簡単なことでは有りません。 ですが、やらなければいけないことがわかっていれば、収益化するのは簡単です。   今回は「ブログで生活するための7つの道のり」をテ...

Laravel7系でTraitのmakeコマンドを作成する方法
プログラミング
artisan,Laravel,Linux,PHP,Trait
Laravel7系でTraitのmakeコマンドを作成する方法

Laravel7がリリースされて、さっそくそれを使った開発の機会がやってきましたので、使用頻度の高いものをまとめていきたいと思います。 5系や6系の情報は多く出回っていますが、6系がLTSということもあって7系の情報は少なめですね。   今回は「Laravel7系でTraitのmakeコマンドを作成する方法」をご紹介します...

カテゴリ

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 独立 神戸 福祉 秘密鍵 翻訳 自己啓発 英語 見積書 計算機 読書 起業 迷惑メール 配列 銀の弾丸 集客 雑学力