プログラミング

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

 

注目の記事

PHPポケモン「状態異常+逃走編〜ねむり・こおり・やけど・どく〜」24
プログラミング
PHP,PHPポケモン,ポケモン
PHPポケモン「状態異常+逃走編〜ねむり・こおり・やけど・どく〜」24

状態異常の実装  今回は、前回作成した「まひ」を参考に、「ひんし」を除いた残りの状態異常も実装していきます。    クラスの作成  まずはそれぞれのクラスを作成します。前回解除時のメッセージを設定出来ていなかったので、まひと合わせて実装していきましょう。   状態異常:やけど(...

レベルアップ時のステータス表示編 PHPポケモン 48
プログラミング
PHP,PHPポケモン,ポケモン
レベルアップ時のステータス表示編 PHPポケモン 48

ステータスの表示 前回経験値バーのアニメーションとレベルアップ時の動的な変更を実装しましたが、レベルアップ時に表示されるステータスの実装は先送りにしていました。なので今回はそのステータス表示を作成しましょう。   ステータスはメッセージとして返却せずに、小モーダルを起動させるという方法で対応しま...

進化アニメーション 前編 PHPポケモン 59
プログラミング
PHP,PHPポケモン,ポケモン
進化アニメーション 前編 PHPポケモン 59

進化アニメーションの実装 今回は後回しにしていた進化アニメーションの作り込みをしていきます。今までもレベルに達すれば進化はしていましたが、その演出はありませんでした。また、ポケモンではBボタンを押すことで進化のキャンセルをすることができます。なので、この辺りも実際のゲームを再現していきましょう。...

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

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

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

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

バズる!ビジネスの見つけ方 〜何で起業するか悩んでいませんか?〜
マーケティング
ビジネス,起業
バズる!ビジネスの見つけ方 〜何で起業するか悩んでいませんか?〜

  独立や起業を志している9割以上の人が「何をビジネスにするか?」を悩んでいます しかし、それは負のサイクルです。 起業するためにビジネスを考えるという行為自体が”矛盾している”ということに気づかなければ、このサイクルからは抜け出すことができません。 その結果、行動できずに終わってしまう人は多...

フィールド効果技編(しろいきり) PHPポケモン 50
プログラミング
PHP,PHPポケモン,ポケモン
フィールド効果技編(しろいきり) PHPポケモン 50

フィールド効果技とは ポケモンの技の中には、ポケモンに対して状態変化や異常を与えるもの以外に、フィールド自体に効果を持たせるものがいくつかあります。PHPポケモンでは未実装ですが、そういったフィールド効果技はポケモンを交代したとしても場に効果が残り続けます。  場の状態(ポケモンwiki) https:/...

コンテンツ配信業でバズるために大切な3つの法則〜『1ヶ月でチャンネル登録者数1000人』は参考にするな
マーケティング
YouTube,YouTuber,ブログ
コンテンツ配信業でバズるために大切な3つの法則〜『1ヶ月でチャンネル登録者数1000人』は参考にするな

  YouTubeやブログを始めたけど思ったように伸びない・・・   こういった人は、チャンネル登録者数を伸ばす方法などの動画を見ても参考にならなく、結果に繋がらないという場合がほとんどです。 その理由は、その人自身に問題があるわけではなく、動画の前提条件がそもそも違っているからです。   今回は「...

カテゴリ

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