越谷レイクタウンのお医者さん　内科編

前回の記事に引き続きPhaser3+Typescriptを使って RPG の基礎を作っていきます。この記事は前回の記事を呼んだ前提で説明していきますので、ぜひそちらを先に読むことをお勧めします。また、今回の記事は前回よりも難易度と内容量が上がっていますが、記事の最後に作業後のリポジトリのリンクがありますので、そちらを先にダウンロードしてそちらと比較しながら学習することができます。前回まで作成した状態のプログラムが以下のリポジトリからダウンロードできますので前回まででうまくいっていない方は参考にしてみてください。 github.com 最終目標（再掲）・Phaser3とTypescriptで RPG ゲームの基礎を作る。・Phaser3をTypescriptで使う方法を学ぶ・Phaser3の使い方を学ぶ今回の目標・ゲームの作り方の断片を知る・キャラの表示できるようにする・キャラを移動できるようにする・当たり判定をつける・ NPC の追加してみる・話しかけられるようにする開発前提（再掲）・Nodejsの環境・知識がある・ Javascript ・Typescriptがある程度かける・当ページ紹介の環境を試す場合はgit・ github の知識がある使用した主要Nodeモジュール（再掲）・typescript（Typescriptのコンパイル用）・phaser（フロントの Javascript 用ゲームライブラリ）・live-server（ソースを監視してブラウザのページをリロード）・ts-loader（webpackがTypescriptをバンドルする用）webpack（言わずと知れたモジュール依存をいい感じに解決しバンドルする）・webpack- cli （webpackをコマンドラインで使用するのに必要）注：各Nodeモジュールバージョンは後述当ブログ仕様の画像素材の注意点当ブログで使用する画像素材は『ピポヤ倉庫』より許可なしで無償再配布・改変が認められたものを改変して作成されたものです。中には許可なく再配布・改変してはいけない素材もインターネット上には多く存在するのでそれらを使用するときは十分に規約を呼んでから使用しましょう。 1. キャラの表示想定画面今回は、はじめにキャラつまり操作

M5Stackで、においセンサー（TGS2450）を使ってみる。（LCDに表示編）

今回は、においセンサー（TGS2450）から取得したデータをM5Stackの LCD にグラフ表示をしていきます。今回主に使用したもの M5Stack 10Ω抵抗 5本 Pch MOSFET 2SJ334（スイッチとして利用） M5StackSideBB（ブレッドボード） M5Stackのピンはそのままだと配線するとき手間がかかるかと思いますので、今回はM5StackSideBBを利用しました。ブレッドボードも付いているので、手軽に電子工作できるので個人的にオススメです。 SideBB for M5Stack www.switch-science.com 諸注意本ブログのプログラムはArduinoIDEまたはPlatformIOでM5Stackの開発ができる状態であること前提のものですので、各自導入をお願いします。過去に Windows のArduinoIDEで M5Stackの開発環境を構築する記事があるので、参考にしてください。においセンサー（TGS2450）について今回使用したセンサーは秋月電子通商で購入できます。 http://akizukidenshi.com/catalog/g/gP-00989/ akizukidenshi.com TGS2450には4つのピンがあり、使用するのはそのうちの3本でヒーターを温めるピン、センサー情報を得るピン、GNDがあります。ここで注意したいのは、ヒーター電圧は1.6Vと記述されているのでM5Stackで利用するときは分圧して3.3Vを1.6V近くまでに降圧することをお勧めします。 TGS2450のセンサーは可変抵抗になっており、データシートには5.62kΩ〜56.2kΩの間を抵抗が変化し、においが強いとより低くなると記述されていました。よって、センサーの値をM5Stackで取得するにはセンサー抵抗と外部に接続する任意の値の抵抗による分圧回路によって求めることができます。 TGS2450の動作方法は、250ms周期でセンサーに電圧を5ミリ秒on、245ミリ秒offの状態にしてヒーターは8ミリ秒on、242ミリ秒offにすることで値を取得します。配線においセンサーとM5Stackの配線上の図が配線図です。 30Ωの抵抗は10Ωの抵抗を三つ直列に接続して作成しました。また、上部の抵抗10Ω二

Phaser3 + Typescriptを使ってRPGゲームの基礎を作ろう！その１

今回はPhaser3とTypescriptを使って簡単な RPG ゲームを作る方法を紹介していきます。内容はPhaser3およびゲーム作りについての記事なので、Nodejsの周辺モジュールなどの説明は一部省いての説明になりますのでご了承ください。またこの記事では Phaser2 ではなく Phaser3 を使用するので注意してください。この記事は二部構成になりますので、この記事を読んだ際はぜひ次の記事も読むことをお勧めします。最終目標・Phaser3とTypescriptで RPG ゲームの基礎を作る。・Phaser3をTypescriptで使う方法を学ぶ・Phaser3の使い方を学ぶ今回の目標・開発環境を整える・Phaser3の開発構成を知る・スタート画面を作る・マップ表示をさせる開発前提・Nodejsの環境・知識がある・ Javascript ・Typescriptがある程度かける・当ページ紹介の環境を試す場合はgit・ github の知識がある使用した主要Nodeモジュール・typescript（Typescriptのコンパイル用）・phaser（フロントの Javascript 用ゲームライブラリ）・live-server（ソースを監視してブラウザのページをリロード）・ts-loader（webpackがTypescriptをバンドルする用）webpack（言わずと知れたモジュール依存をいい感じに解決しバンドルする）・webpack- cli （webpackをコマンドラインで使用するのに必要）注：各Nodeモジュールバージョンは後述 1. 最低限の開発環境の準備今回最低限の環境を整えるために、『Typescript + Phaser3』の開発テンプレートを github リポジトリで公開しました。以下からZIPをダウンロードするか、 git clone コマンドで各自環境に展開してみてください。ここから先はリポジトリのプログラムを元に説明していきます。 github.com 展開するとファイル構造は以下のようになっているかと思われます。注：他にもファイルやフォルダがあるかと思われますが、表記されているのは今回使うものになっています。 - src/ （これから書くプログラムの保存領域）

HaLake Magazine

このブログを検索