甲府駅から成田空港へ 朝の6時45分。13時30分発の飛行機に乗るため早起きです。 甲府駅からは成田空港までの直通バスが出ていて、それに乗っていきます。 一本遅らせると成田空港に13時30分着のバスになってしまうので仕方ありません。 事前に予約ができ、コンビニ支払いにするとコンビニで乗車券がもらえます。 ついでにコーヒーを買って飲みました（フラグ）。 途中で10分の休憩があります。石川。 この時点で早朝に飲んだコーヒーのせいか、尿意がすさまじかったです。 一応バスの中にもトイレはあるのですが、あれは緊急用。バスの中でトイレはしたくないでしょう？ バスをトイレの近くに止めてくれたので、迷うこともなくサッとすますことができました。 成田空港 成田空港第２ターミナル4Fのスターバックスにて出発の便まで待ちます。 時間帯のせいかコロナの影響かわかりませんが成田空港は静かでした。 2F…
続きを読む →
デモ Github 白い丸をドラッグすると移動させることができます。 CocosCreator HTML5ゲームを作成する上で最も簡単だと思われるゲームエンジンです。推しです。 詳細はこちら シーン Wall, Pack, Malletを配置。 PhysicsColliderComponentをアタッチ。 各種パラメーターを調整。 Malletのタグを１とした。 Pack ▼Pack.ts Mallet ▼Mallet.ts
続きを読む →
Github ダウンロード スクリプトファイルと実行ファイルがダウンロード可能です。 Clone or Download => Download ZIP からどうぞ。 動画
続きを読む →
主張 Webゲーム開発に最適なのはcocoscreatorだと思います。
特にUnity経験者に向いています。 なぜcocoscreatorなのか？ HTML5ゲームエンジンといえばいくつかあります。 PlayCanvas Phaser CocosCreator BabylonJS いずれも有名ですが、どれがディファクト開発環境かと聞かれて、即答できる人は少ないと思います。
そこで今回は"とっつきやすさ"で比較していきたいと思います。 CocosCreator PlayCanvas Phaser BabylonJS 費用 〇 △ 〇 〇 学習コスト 〇 〇 △ × 3D △ 〇 × 〇 GUI 〇 〇 〇 〇 独断と偏見により各種ゲームエンジンの特徴を表にまとめました。 BabylonJSはNode.jsを立ち上げたりEditorの癖が強かったりして学習コストが高いです。 Phaser…
続きを読む →
prismjsとは Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind.公式サイト ようするに、最新のめっちゃ軽いシンタックスハイライターです。 公式サイトにいくつかテーマがあり、それをインポートすればかっこいいシンタックスハイライトが実現できます。 もちろんcssをオーバーライドすればカスタマイズすることも可能です。 gatsby-remark-prismjsの導入 コンソールで以下のコマンドを実行すれば、gatsby-remark-prismjsをインストールすることができます。 ▼コンソール 次に、gatsby-config.jsでgatsby-remark-prismjsをgatsby-transformer-remark…
続きを読む →
タップしている指の座標を取得する Input.touches :
最後のフレーム間ですべてのタッチ情報のオブジェクトリストを返します（読み取り専用）[リファレンス] とあるので二本指の座標は以下のようにして取得することができます。 2点間をベクトルとして、1フレーム前のベクトルとのなす角を求める まず、最初のタッチでは前フレームのベクトル(_beforeVec)がないので、それを決定したらreturnで処理を終了するようにします。 Vector3.Angle : 2点間（ from と to ）の角度を返します
Vector3.Cross : 2つのベクトルの外積
[リファレンス] とあるので、Vector3.Angleによって角度を求めた後に外積のzの値を用いて正負を決定します。 少し面倒ですがVector3.Angleは0～18…
続きを読む →
インスタンス化 → Destroy は重い Unityで安直にPrefab（弾）をインスタンス化し、それを発射してDestroy()をするとどうなるでしょうか。 同時に発射する弾が少なければ問題はありませんが、弾幕を張ろうものなら……はい、処理落ち地獄ですね！ 処理落ちの主な原因はインスタンス化（instantiate() ）です。したがって、インスタンス化を事前にしておき、それを使いまわすという方法が王道です。 オブジェクトプール 事前にオブジェクトを用意することをオブジェクトプールといいます。 具体的には、Start()やAwake()関数でインスタンス化を行なっておき、あとはgameObject.SetActive…
続きを読む →
ある日、iPhoneで自分のブログを確認していたところ、細かい所ですが少しイラっとくる点に気づきました。 以下の画像を見てください。分かるでしょうか。 右側に僅かですが、謎の余白が生まれてしまっています。 これが原因で横スクロールできてしまい、ガクガクしてしまうときがありました。 また、markdown のコード表示が非常に見づらいです。 これら修正します。 スタイルの追加 軽く調べたところ、htmlとbodyに overflow: hidden を適用すればいいみたいです。 なのでLayout.js とall.sass に以下のようなコードを追記しました。 2019/12/25 追記：コードを見やすくするのには"gatsby-remark-prismjs"を導入するべきです。後日記事にしたいと思います。 ▼Layout.js (Helmetタグ内) ▼all.sass…
続きを読む →
今回はブログページの下部に前後のブログ記事のリンクをつくりたいと思います。
記事の一覧ページはBlogRoll.jsに実装されていたのでそれを参考にします。 blog-post.js の編集 queryにBlogRoll.jsのqueryをコピペして追加します。 データの取得部分を以下のように追記 前後ページリンクの設置 確認 これで以下のように前後記事へのリンクを貼ることができました。 あとはデザインをなんとかしたいですね。
続きを読む →
GatsbyJs とは？ GatbyJsとは、Reactを使った静的サイトジェネレータのことです。 静的サイトジェネレーターは他にもHUGO、Hexo、Jekyllなどがありますが、GatsbyJsの大きな特徴は、リソースデータの取得にGraphQLを使っている点とReactを使っている点です。 Netlifyとは？ 静的サイトのホスティングサービスです。 GitHub / GitLab / Bitbucket のリポジトリと連携することができ、リポジトリを更新すると自動でデプロイしてくれます。 つくる Netlify CMSというものがあります。これはWeb上でMarkdownの記述ができ、そのまま更新ができるというものです。今回はそれを使用するテンプレートを使います。 以下のリンクからGitのリポジトリにそのテンプレートをfolkできます。 netlifycms.org/docs…
続きを読む →