Zensen.プログラミング、カメラを中心になんでも書く雑記ブログです。17アプリ制作*はじめに!!お久しぶりです。すけと申します!今年はお盆休みを9連休もいただきまして、友達とバイクで江ノ島に行ったり、バーベキューをしたりと夏を満喫しておりました。遊んでばかりいた訳では有りません!tmlibを使用したアプリ制作の方も少しずつ勉強しておりました。完成では有りませんが、初代ポケモンの挙動を少し作ることができたので、まとめたいと思います。】1)tmlibのバージョンは0.5.0で動作するように作成していますが、作成にあたり色々なバージョンのソースコードを参考にしているので0.5.0での最適なコードがかけているかは分かりません。2)javascript初心者なこともあり、とにかく動かすこととtmlibでの書き方を理解することが目的だったので、ムダにあちこちメソッド化をしてみたり、めちゃくちゃなソースコードになってしまっていると思われます。コピーしてもバグがあるかもしれないので気をつけてくださいね。制作にあたって使用している画像はjsdo.itのサーバーに上げさせてもらっていて、それをrunstantとかでも使っています。runstantはこちら!!ランダムでアイテムが4つ生成させれるので、アイテムの目の前でAボタンを押すとアイテムが回収できます。?初代のポケモンと同じような挙動はできているでしょうか?ドットは自分で打ちました。壁のあたり判定アイテムの生成、回収です!ゲームのプレイ動画を漁りながら似たような挙動を目指して作りました。見るとこれだけかーと思ってしまいますが、一つ一つを実装するのに結構時間をかけました。tmlib.jsのおかげでそれなりに実装できたと思っています。*2詳しく解説します!!tmlib.jsの基本的な書き方!まずは、tmlib.jsの基本的な書き方です。はじめの一歩としては「tm.main」と「GameScene」というクラス(機能の固まり)のようなものをつくってそこにどんどん追記していきます。画像はこのようにまとめておく。画像はjsdo.itで画像を上げています。ここでスクリーンの設定。},});上記のrunstantです。開くと画面は真っ暗ですが、アラートが表示されたなら問題ないです。基本的にはjavascriptのオブジェクトの書き方と一緒です。この「GameScene」というのはゲームのメイン画面となるところにします。他にも自作のクラスを作るときにもこの形が基本形となり、クラス名を自分で決めて継承先のクラスを変更することで、クラスが作れると思います。この「GameScene」にこれからどんどん追記していくのですが、ここに直接コードを書いて行くと少し見づらい気がしたので、私は機能をメソッド化してそれを「GameScene」から呼び出す用にしています。このクラスに直接処理を書いても問題なく動きます。コードを説明する前に文字で処理を説明したいと思います。},});こんな感じです。それでは一つ一つ説明していきたいと思います。ふー長くてすいません。背景マップを生成します。下記のコードにいきなり沢山の変数が登場していますが、それはrunstantに書いてあるので参考にしてください。},});上記コードの説明は以下の通りです。「stageDate」には、背景のデータを文字にして格納します。床を置きたいところに「00」という文字列をいれておきます。「stageDate」の「00」が入っている座標と同じ位置の「imgStageBase」に床画像を作成します。マップの文字データが入っている「stageDate」とマップの画像データが入っている「imgStageBase」の関係を同じにするのがポイントです。次に、壁を設置したいところの「stageDate」に「10」をいれておきます。先ほどと同じように「stageDate」の「10」が入っている座標と同じ位置の「imgStageBase」に壁画像を作成します。床が「00」で壁が「10」なのは、後であたり判定を付ける際に差別したいためですので、値自体は何でも大丈夫です。実際に「stageDate」や「imgStageBase」に値をいれている処理は下記のような箇所です。//addChildToでthisに生成ってな感じです。説明が下手でスイマセン。*3つづくよ!!本当は一気にこの記事にまとめようと思いましたが、量が多くなりそうだったので、基礎&背景編としてここで区切ります。次回はキャラクター編をご紹介したいと思います!*まとめ!!マップの生成に関しては参考にさせていただいたサイトで紹介されている方法をほぼそのまま採用させていただいています。見た目用の変数(imgStageBase)とあたり判定用の変数(stageDate)を用意する方法です。参考にさせていただいたサイト【逃走ゲーム】テキストからステージ情報を読み込んで表示する【解説編】ほとんどそのまま使わせていただいております。me!!どうも!ぴーすけと申します!!←詳しく自己紹介このブログは、ByUZensen.(バイウゼンセン)といいます。プログラミング、カメラ、音楽、生活、バイクなどの記事を中心に更新しています。管理者はぴーすけと申します。某ECサイトでシステムエンジニアをしています。仕事ではjavaでプログラミグをしていますが、JavaScriptが好きで、個人的にゲームを作ったりしています。他にはX-T2で写真を撮ったり、ギターで遊んだりしています。