Tiled Map Editor で作ったマップを、Cocos Creator で読み込む方法を紹介します。
今後のゲーム制作で登場するか分からないですが、一応こんな機能があるよってことで。
こんなのが出来ます。https://noitaro.github.io/cocos-creator-tiledmap-web/
開発環境
Windows 10 Home 1903
Cocos Creator 2.1.0
Tiled Map Editor 1.2.4
Tiled Map Editor でマップデータを作るまず、Tiled Map Editor をダウンロードしてインストールまでしておきます。
新しいマップを作成メニューから、ファイル > 新規 > 新しいマップ の順で選択していき、新しいマップを作成します。
今回は、isometric のマップを作りたいので、マップの種類をひし型タイルにしました。
四角型や六角型のマップも作るので、いつかチャレンジしてみたいです。
何もないマップが出来ました。
タイルセットを作成次に、新しいタイルセットを作成します。
メニュ...
スマホゲームをやっている気がつくのですが、画面をタッチするとキラキラ光る場合がありますよね？
あれを particle(パーティクル)って言うんです。
ユーザーがちゃんとタッチしたか分かりづらいから入っているんだと思います。
それを試しに実装してみます。
こんな感じ
ブラウザでの動作確認はこちらで出来ます。
https://noitaro.github.io/cocos-creator-particle-web/
開発環境
Windows 10 Home 1903
Cocos Creator 2.1.0
パーティクルを作るCocos Creator で作ることも出来るのですが、結構手間で思い通りに作れませんでした。
なので今回は、Cocos2d-x 用のパーティクルを作れるウェブサービスを使って作ります。
Particle2dx
http://particle2dx.com/
右側のスライダーや値などを変えると、左側のプレビューに反映されるので、直感的にパーティクルが作成できます。
いい感じのパーティクルが出来たらエクポートいい感じのパーティクルが出来たらパソコンに出力します...
動画をGIFアニメにしたいことってありませんか？
今回、デスクトップを録画してGIFアニメにしたので備忘録しました。
ちなみに、今回はこんなGIFアニメを作りました。
ゲームで使うパーティクルですね。
画像だと伝わらないと思ったので、GIFアニメに挑戦してみました。
デスクトップをキャプチャするまず、GIFアニメにする元が無いと話になりません。
というわけで、デスクトップを録画してMP4形式の動画にしちゃいます。
GeForce Experience を使ってデスクトップを録画するグラボを積んでいるパソコンだと、NVIDIA の GeForce シリーズか、AMD の Radeon シリーズがメジャーだと思います。
今回は、NVIDIA の GeForce シリーズを使っているパソコン向けに説明します。
他のは持っていないので、フリーの録画ソフトで作成して下さい。
GeForce Experience を初期設定から変えていなければ、Alt + Z でオーバーレイメニューが出てきます。
その中の 録画する > 起動 とやるとデスクトップの録画が開始されます。
動画の保存...
最近、ゆゆうたの動画にハマっています。
https://www.youtube.com/channel/UCNMG8dXjgqxS94dHljP9duQ
https://youtu.be/UEJ2F09_4Qo
耳コピやアレンジが上手くて凄いっす。
そんなゆゆうたに影響されててか、ちょっと変な楽器を買ってしまったので紹介をします。
ビブラートが上手なオタマトーン面白い音が出る電子楽器のオタマトーンです。
amzn.toAmazon.co.jp: キューブ オタマトーン デラックス (ブラック) : おもちゃhttps://amzn.to/2CLfCV6
なんじゃこりゃな外見ですが、電子楽器なのです。
ちなみに通常サイズも買いました。
amzn.toAmazon | オタマトーン スイーツ ミント | 音楽プレイヤー | おもちゃhttps://amzn.to/2CS4bet
大きさは1.5倍ぐらい違うオタマトーンを並べてサイズ比較してみると、1.5倍ぐらいの違いがあります。
使い心地についてハッキリ言って、小さい方は使いづらくて無理ですね。
大きい方と比べると小さい方...
PWAとは、「Progressive Web Apps」の略称で、モバイル向けWebサイトをGooglePlayストアなどで見かけるスマートフォン向けアプリのように使える仕組みらしいです。
詳しく知りたい方はこちらを読んでみて下さい。
初めになぜ導入したかと言うと、今後、Webアプリを作るに当たって必要になりそうな機能だからです。
Webアプリは、ブラウザからじゃないとアクセス出来ないため、どうしても手間に思えてしまいます。
ホーム画面にボタンを設置できるようになれば、利便性が向上するので、利用してもらいやすくなるのです。
その先駆けとして、のい太ろぐに導入してみました。
アイコン画像をサイズ別で用意まず初めに、ホーム画面に追加した際に表示されるアイコン画像を用意しました。
うちのサイトのアイコンは、こちらの無料サイトから使わせてもらっているので簡単に集めることが出来ました。
https://icooon-mono.com/
Hexo に PWA プラグイン を導入先人の方が作ってくれた PWA プラグイン を Hexo に導入しました。
大変ありがとうございます。
1npm ...
Cocos Creator で作ったゲームを GitHub のホスティングサービスで一般公開する方法です。
GitHub はバージョン管理システムですが、ホスティングサービスもやっています。
プライベートリポジトリだと、ホスティングサービスは使えないので、パブリックで一般公開することになるけど、お試しなら問題ないよね。
あと、ゲームといっても 「Hello, World!」だから許してね。
Web 用にビルドするプロジェクトを作成元が無いと始まらないので、まず初めに Cocos Creator でプロジェクトを作成します。
今回も、Dドライブの直下に作成です。本当は衛生的に良くないけど我慢です。
Web 用にビルド何も手を加えないで、Web 用にビルドします。
今回の目的はゲームの作成じゃなくて、GitHub Pages を使って一般公開だからね。
メニューから Project > Build の順で選択して、ビルド画面を表示する。
Platform を、Web Mobile に変更する。
んで、右下の Build ボタンを押すと、Web 用にビルドされたファイル群が...
今回は、Firebase Authentication のメール認証に挑戦です。
メール認証の他にも、Twitter 認証や、匿名認証も用意されています。
初めてだから失敗するかも。
認証コンポーネントを追加するプロジェクトに認証コンポーネントを追加します。
前回、Android Studio と Google アカウントを紐づけてあるので、接続は済んでいると思います。
まだの方は前回の記事を参考にして、接続してみて下さい。簡単だから説明なんて要らないけどね。
Add Firebase Authentication to your app を押します。
プロジェクトに追加されるコンポーネントが表示されます。
Accept Changes を押します。
レイアウトにテキストボックスとボタンを配置する次に、見た目を作っていきます。
とりあえず、こんな感じにザックリと作ってみました。
今回はIDも変えているので、ソースをコピペする場合は気をつけて下さい。
認証のログイン方法を設定するFirebase コンソールから認証に使用するログイン方法を設定します。
メールパスワードを有...
私がハマったエラーと解決方法をまとめていきます。
誰かの役に立てれば幸いです。
まあ、エラーにぶち当たった分だけ成長出来るから、エラーを起こさないでスムーズに行った人は脆いんですよ。
戯言でした。
ケース１
Missing google_app_id. Firebase Analytics disabled.
発生環境
Windows 10 Home 1903
Android Studio 3.4.2
dependencies: ‘com.google.gms:google-services:4.1.0’
原因google_app_id が設定されていないため。
解決方法strings.xml に、プロジェクトのアプリID を追加する。
問題点‘com.google.gms:google-services:4.1.0’ を 4.2.0 に上げると、追加したものがエラーとなる。
その場合は、追加したものを削除したら問題なく動作した。
よくわからん。
おとなしく、最新版を使いましょうってことかな。
あと、エミュレーターだと上手くいかないときがあるから、実機でテストした方がよさそ...
前回作った何もしないアプリに、ボタンを置いてクリックイベントの処理を実装していきます。
初めてなので失敗するかも。
ボタンを置いてクリックイベントの処理を実装するレイアウトファイルを開く左のプロジェクトツリーリストから、[content_main.xml]を開きます。
開き方は、左のプロジェクトツリーリストから、Android > app > res > layout > content_main.xml の順で選択していくと開けます。
実際のファイルは[D:\Ailtinav00\app\src\main\res\layout\content_main.xml]にあります。
レイアウトにボタンを追加するパレットの中から Button を見つけ出して、デザインに追加を押します。Button にフォーカスを合わせて Enterキーでもよさそうです。どちらでもお好みでどうぞ。
左上にボタンが追加されます。
メイン処理が書いてあるファイルを開くメイン処理が書いてあるファイル[MainActivity.java]を開きます。
開き方は、左のプロジェクトツリー...
前回、ボタンを設置してアラートダイアログを表示してみるまで実装しました。
その続きからやっていきます。
今回は、Firebase Analytics を使えるようにしたいと思います。
初めてだから失敗するかも。
Android Studio から Firebase を使えるようにするGoogle にログインするAndroid Studio の ツールから Firebase を選択する。
アシスタントの Firebase から アナリティクスを選択して、Log an Analytics event をクリックする。
Connect to Firebase をクリックする。
ブラウザーが開くので、Google にログインする。
Android Studio が Google へアクセス許可を求めてくるので、許可します。
アクセス許可が済んだら、もうブラウザーは要らないので閉じます。
Android Studio 側で、Firebase へ接続画面が表示されていると思います。
Create new Firebase project を選択して、Firebase へ接続ボタンを...