Phaserでtilemapとプレイヤーを追跡するライトを実現
tilemapとプレイヤーを追跡するライト マップエディタ（Tiled）で作成したtilemapを利用して、マップを作成します。また、マップ内全体を暗くします。プレイヤー周辺だけを明るくして表示します。ライトの機能ではなく、Phaserのテクスチャーとマスク処理を利用して、プレイヤー周辺だけを疑似的に明るくします 参考にした記事 以下の記事を参考にしました。この記事では、画像を2枚重ねて、カバーしている画像でスポットライトのような効果を実現しています。この仕組みとtilemapを合体しました Creating a Flashlight or Spotlight Effect in Phaser 3 マップの使用 タイルは64x64 横は12マス、縦は12マス レイヤーは1個だけ、レイヤー名はstage レイヤーstageにはプレイヤーは衝突する ここで目指すもの とりあえずtilemapの
Tiledで作成したタイルマップjsonファイルをphaser.jsに読み込む方法
# Tiledで作成したタイルマップjsonファイルをphaser.jsに読み込む方法 JavascriptゲームエンジンのPhaser.jsは、タイルマップを読み込めるのだけれど、Tilemapデータの作成や読み込みに苦労したので、その手順を記述する。 結論から書くと、Tiledでエクスポートする前に、タイルセットレイヤーで「Embed Tilelayer」ボタンをクリックしておく。 ## 準備 タイルマップのパーツになるタイルセット画像を用意しておく。 ここでは、32x32ピクセルの画像を組み合わせて、「tilesets.png」というファイルにしている。  ## Tiled - [Tiled Map Editor | A ge
Phaser3でボタンクラスを作る - Qiita
あらすじ Phaser3でUIコンポーネントを別クラスに自作する方法をボタンクラスを例に書いていこうと思います。UIコンポーネントを別クラスに記述できると複数人での作業の分担などが行いやすくなるので、役に立つのではないのでしょうか？ (あと、Atomic Designのようなコンポーネントをファイル等で分ける前提の手法もとれるようになりますね) やり方 プログラム全文 import * as Phaser from "phaser" interface Props{ width?: number; height?: number; onClick?: Function; } export default class Button extends Phaser.GameObjects.Container { seKey: string = ""; text: Phaser.GameObjec
【Phaser3入門】ゲームを作る前に
Phaser3についてPhaser3とはゲームを開発するためのTypescriptフレームワークです。 公式のデモをよく見失うのでここに貼っておきます Phaser3 DEMO バージョンこの記事を作成した時のバージョンは3.52.0でした 構造Phaser公式のクラス一覧 物理エンジンイベントなどに使う衝突判定を行うには物理エンジンが必要です Phaserには物理エンジンは３種類あります - arcade - matter - impact Copyarcadeはphaser独自の物理エンジンでscene.physics(this.physics)などと記述されていることが多いです matterはMatter.jsの物理エンジンでarcadeと一緒に使ったり、matterだけ使ったりできます impactはImpact.jsの物理エンジンを使うようになります あまり例をみないのと詳しくな
アルフォード博士の悪夢
▼▼▼概要▼▼▼ このゲームは、黒宮ティマ様の描かれたキャラ「アルフォード博士」を動かすために作られた 二次創作アクションゲームです。 全１ステージで、プレイ時間は慣れて数分です。 セーブ機能はありません。 二段ジャンプ、ダッシュ、壁掴みなどがあり、操作難易度はやや高めです。 敵は出ません。自機の喪失もありません。アイテムを集めるとステージクリアです。 鬱ホラーな雰囲気ですが、びっくり要素はありません。 ▼▼▼操作について▼▼▼ 最初の画面にて、ＰＣでの操作か、スマホでの操作かを選べます。 マウスのクリックか、画面のタップにて選んでください。 ＰＣでは、ゲームパッド、キーボードによる操作が可能です。 詳細はプレイ中の画面右の画像で確認できます。 スマホでは、画面下の仮想ゲームパッドによる操作が可能です。 詳細はプレイ中の画面下のボタン上に文字で書かれています。 スマホはAndroid6のC
Phaser3をかじる本
Phaser3の導入からスプライトの表示、操作までの手順をまとめていきます。 この本を読むにあたり、下記の1点について経験がありますと、より理解しやすくなると思います。 1. JavaScriptをそれなりに使った事がある方
Googleカスタム検索エンジンの設置方法 - Qiita
Googleカスタム検索の設置メモです。 V2は後で追記するかもです。 どこか間違いがありましたら、ご指摘いただけると幸いです。 ※2019/4/2更新 <gcse:searchbox-only><gcse:searchresults-only>を使うとMarkup Validation Serviceに引っかかる為、HTMLタグを使用した方法に変更しました。 属性を追加する場合は、プレフィックス「data-」を付ける必要があります。 #前提条件 Googleアカウントをこちらで管理していない。 別に検索結果ページ作成。 検索結果ページは、検索窓と検索結果が別エリア（デザインのレイアウトオプションを2列に設定してもらっている） 通常ページは検索窓のみ。 #Custom Search Element Control API 制御にJavaScriptを使用しない方法です。 まずは下記コードを
Mobile Screen Resolution Stats Japan | Statcounter Global Stats
Sorry, JavaScript is required to view Global Stats charts.
CSSの設計(OOCSS, BEM, SMACSS, FLOCSS) - わくわくBank
開発人数が多く、規模の大きいプロジェクトほどCSSは破綻しやすくなります。破綻を防ぐためにいくつかの設計手法が提案されています。ここでは、CSSの設計で「目指すべき状態」と「各種設計手法」について整理します。 CSS設計で目指すべき状態 https://philipwalton.com/articles/css-architecture/ にて、目指すべき状態を4つあげています。 再利用しやすい 同じUIが必要になったとき、すでに存在するスタイルを使いまわせるか 拡張しやすい 表示バリエーションが増えた時の対応のしやすさ 修正箇所が広範囲にならずに対応できるか 保守しやすい 既存ルールに影響をださずに新しいルールを追加できるか 予測しやすい 何のためのclassか予測しやすい どこで使われているか不明なルールが残っていないか スタイルを追加したとき、期待した箇所のみに、期待通りにスタイルが
CreativeML Open RAIL-M ライセンスざっくり意訳 - Qiita
画像生成界隈でStable Diffusionが話題ですね ご多分に漏れず自分もなにかしようかなと思ったのですが、それにつけても気になるのはライセンス。巷の噂ではCreativeML Open RAIL-Mというライセンス下での使用が認められているそうで、なんと生成画像の商用利用も可！ ということですが、思わぬ違反があるとあと面倒だなあと念のため全文頑張って読みました。なお主にDeepLが頑張りました。 読んだ結果をメモした内容を、備忘録も兼ねて載せておきます。あくまで個人的なメモなので正しいかどうかは各自の判断でお願い致します。（これもCreativeML Open RAIL-Mライセンス風……？） 誤っているところや重要事項の漏れ等ありましたらご指摘いただけると嬉しかったりします。 なお、ライセンス自体は公開されているモデルやその派生物全体についての包括的な内容なのですが、生成した画像
Search prompts for Stable Diffusion, ChatGPT & Midjourney
9 months ago dynamic, high-speed action, encapsulated in a warm, vibrant sunset backdrop, a tight crop focusing on the airborne skateboard and the soles of shoes, amidst a dance of water droplets, high-resolution photography that captures the brisk movement and subtle details, like water splashing and texture contrasts, Nikon D850 for its fast shutter speeds and high dynamic range, which preserves
entry.htmlのデザイン設計で心掛けていること | ブログ | IORI-ST
※これは a-blog cms Advent Calendar 2021 5日目の記事です。 まず最初に。今年のテーマ選定、かなり悩みました…。というのも今年はサイトマップの設計からデザイン制作までを担当することが多かったので、テンプレートにはあまり触ってなかったんですよね。そんなわけで今回はコードベースのhowtoではなく、あえての構造設計目線の記事にしています。a-blog cms の情報源としてはちょっと珍しいかもしれません。 サイト構造を切るa-blog cms 初心者のディレクターさん、ページ設計をするデザイナーさんあたりの参考になれば嬉しいです。 この記事で伝えたいこと entry.htmlは可能性に満ち溢れている entry.htmlで作るページの設計パターン お客さんに好評だったカスタムユニット 制作目線で用意しておくと便利なカスタムユニット スタイル指定の罠もあるので注意
a-blog cmsのカスタムユニットとしてMapboxを使用する方法(IE11対応) | Mapbox | tsuchida.log | appleple.blog
Mapboxとは Mapboxは世界中で採用されている地図サービスです。近年、日本でも徐々に利用されるようになってきています。今回は、Mapboxをユニットとして使用できるようにするまでの手順を紹介します。作業をすすめることで以下のような地図をa-blog cmsのユニットとして作成できるようになります。- 事前準備 a-blog cmsのカスタムユニットとしてMapboxを使用するためにMapbox側で準備するものが２つあります。 1． アクセストークン： MapboxのWebページ（https://www.mapbox.jp/）でアカウントの作成を行うことで簡単に入手できます。 2. スタイルURL：MapboxStudio（https://studio.mapbox.com/）というツールを使い、地図の見た目を決める「スタイル」を作成してください。スタイルの作成後にスタイルURLを入
ChatGPTの精度を上げる、あらゆる質問の最後に置く「命令」 優秀な壁打ち相手を作る、「チャットAI力」の高め方 | ログミーBusiness
ChatGPTユーザーの悩みを解決するプロンプト徳力基彦氏（以下、徳力）：まず今日はChatGPTの使い方をしっかり覚えていただきたいと思います。ここで「深津式汎用プロンプト」。 深津貴之氏（以下、深津）：僕は1個1個、個別の例を出すのはあんまり好きではないです。さっき言ったように原理原則を1個理解すれば、全部その原理原則から引っ張れる方向が好きですね。 なので今日も、細かいプロンプトを出すよりは、だいたいあなたの悩みのすべてを解決するプロンプトを1個出すので、これだけ覚えて帰りましょう。 徳力：プロンプトですと、一気にプログラミングっぽい感じになってきました（笑）。これ（スライド）がサンプルですね。 深津：僕がいろいろ試した中で、それなりにいい感じになる汎用プロンプトです。 徳力：最初に聞くのを忘れましたけど、深津さんはChatGPTを何回ぐらい使っているんですか？ 感覚として。当然数え
イベントループとプロミスチェーンで学ぶJavaScriptの非同期処理
JavaScript の非同期処理は非常に難しく、その難しさの原因は「制御の流れ」が掴みづらいことにあります。 この本では非同期処理を理解するために必要な概念であり、仕組みでもあるイベントループでプロミスチェーンの処理がどのように行われるかをクイズ形式で学ぶことによって、非同期処理の「制御の流れ」を掴めるように訓練します。 知識面については中枢となるイベントループの機構から、実行環境と API、async/await や Promise.all などの一通りの範囲を学習し、最終的には並列化や順序づけて反復処理を行うための制御方法と TypeScript での型注釈までを網羅します。
私の a-blog cms 小ネタ集 2020 | すずきカレーのa-blog cmsメモ
すずきカレーのa-blog cmsメモ a-blog cmsのカスタマイズ情報を中心に、Web関係の情報や、MacのTipsをメモします。 たまに読書メモ。 a-blog cms Advent Calendar 2020 の5日目のエントリーです。 今回は、a-blog cmsのTipsを紹介します。 この1年はa-blog cmsの記事を、ブログに書きませんでした。 でも気にしません。フォーラムや、Twitterで書いてるからです。 そのほうが得るものが多かったり、便利な場合もありますね。 どんなツイートをした1年だったか、実際にツイートした情報を中心に小ネタ集としてまとめました。 ユーザーへの「権限付与」機能が明らかに a-blog cmsの「ショートカット機能」について。 ショートカット機能は、実質的にはユーザへの「権限付与」機能です。 たとえば、 「投稿者」権限のユーザーに対して「
Advanced Custom Fieldsのフィールドタイプ「タクソノミー」の使い方 | Recost Design
カスタムフィールド系プラグインの定番「Advanced Custom Fields」 以前、投稿オブジェクトを表示させる方法をご紹介しました。Advanced Custom Fieldsは便利なんですけど、phpをよくわかってないと表示させるのが難しい状況に直面することがしばしあります。 今回、個人的に苦労したのが、フィールドタイプ「タクソノミー」。投稿タイプAに投稿タイプBで使っているタクソノミーを選択できるようにするのにするのに、行った設定を紹介します。 Advanced Custom Fields側の設定 タクソノミーは通常、複数選択出来ますが、今回は一つだけ選ぶようにしたかったので、フィールドタイプを「単一値」を選びます。ちなみに写真ではセレクトボックスを選んでいますが、Radio ButtonsでもOKです。 あと返り値は必ず「Term Object」を選んであげてください。 出
ハーフモーダル（半モーダル）の時代が到来！【スマホサイトのUIデザイン】｜とみー@WEBサイト分析・CVR改善
クリスマスから唐突に開始されるUIデザイン研究。 私はWEBディレクターとして、現場でよく使われるUIデザインを研究しています。 UIデザインにおいて、使いやすいデザインを研究する際、参考にすべきものは、「大手サイト・大手サービスのUI」です。 大手はお金をかけてUI・UXの研究を行っており、CVRがより高くなるデザインで常に最先端を走っています。我々は研究する土俵が少ない中で、それらを後追いしていくことが最も「効率的」なのです。 今回はAppleやGoogleなど、大手が軒並み採用し始めている「ハーフモーダル」についてお話しましょう。 感動するほど使いやすい「ハーフモーダル」とは？ ハーフモーダルとは、画面下部から表示され、画面の半分までで表示されるモーダルを指します。 半モーダル、セミモーダルとも呼ばれるUIデザインになります。 メリットとしては以下のようなものがあります。 ・画面が「
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Google Maps JavaScript API has been loaded directly without a callback...対応 - Qiita
Plask Motion: AI-powered Mocap Animation Tool
