ファイル名やディレクトリ名に指定できない文字のチェック - Qiita
ファイル名やディレクトリ名に使用できない文字が含まれていないかチェックするために、正規表現を使ったのでまとめておく。 正規表現 正規表現とは、特殊な文字や記号を使っていくつかの文字列を1つの文字列で表現する方法のこと。今回正規表現の記号と意味についての紹介は省略します。JavaScriptで正規表現を使う方法は2種類ある。 ■ 正規表現リテラル ・スラッシュ(/)の中に正規表現パターンを直接指定する。 ・正規表現のパターンが変化しない時に使用。 ■ RegExpのコンストラクタ ・RegExp()の引数に正規表現パターンを直接指定する。 ・外部からの入力など正規表現パターンが変化する場合に使用。
Sceneの取り扱い② Sceneの構造、Scene間の連携 - ゲームプログラミングノート
今回はシーンの基本的な構造について紹介いたします。 preload, create, update preload : アセットの読み込み、シーンの前準備 create : ゲームオブジェクトの作成に適したタイミング update : 毎フレーム実行、いわゆるゲームループ部分 scene.getで他のシーンの中身を取得する scene.getでシーンを取得する preload, create, update 前回のシーン実行の記事では説明を省きましたが、 preload, create, updateはシーンの基本構造です。 これらを使って再生ボタンの周りを回転する円弧を作ってみましょう。 //別シーンからアクセスできるようにpublicにしておく public sprite: Phaser.GameObjects.Sprite; constructor() { //Sceneを拡張してク
Phaser 3 新機能 : Sceneの取り扱い① 遷移、並列実行 - ゲームプログラミングノート
今回はPhaser 3で追加された新機能、Sceneを紹介いたします。 SceneはPhaserのコンポーネントを簡単に一括管理できるので非常に便利です。 シーンを作る、登録する start()で遷移、launchで並列実行 startによる遷移 launchによる並列実行 総括、サンプルコード全文 前回の記事、 gpnotes.hatenablog.jp 内のサンプルコードでは「Phaser3」を出力するSceneを作っています。 今回はこのコードを基にSceneの登録、実行などの基本的な扱い方を勉強していきます。 シーンを作る、登録する 前回のサンプルコードを少し変更しました。 シーンを複数記述する場合、呼び出すためのキーを設定する必要があるため、 コンストラクタ内で設定を記述しています。 class MyScene1 extends Phaser.Scene { constructo
Phaserでマップを利用した仕組み
tilemapを利用したマップの仕組み マップエディタ（Tiled）で作成したtilemapを利用して、マップを作成します。初歩的なtilemapを利用したパターンです マップの使用 タイルは64x64 横は12マス、縦は12マス レイヤーは1個だけ、レイヤー名はstage レイヤーstageにはプレイヤーは衝突する ここで目指すもの とりあえずtilemapの表示 プレイヤーは上下左右に移動、1個の移動で64移動する プレイヤーは移動時にアニメーションする マップ内にライトを導入してプレイヤー位置をライトで照らす仕組みは次の課題にする 利用するスプライト画像 以下の画像を利用したtilemapとプレイヤーを作成します。1個のタイルのサイズは横64、縦64です こちらの画像 preloadメソッド this.load.spritesheetでスプライト画像を読み込みます。frameWidt
マップエディターで作成したタイルマップを Phaser3 で描画する
概要# TiledMapEditor で作成したタイルマップを Phaser3 で読み込む方法を紹介します。 アセットの読み込み# タイルマップで使用した画像データとマップデータの JSON ファイルを読み込みます。 データを読み込む関数の最初の引数にはのちに別の関数から呼び出すための名前となるキーを指定します。 もう一つの引数にはファイルのパスを入れます。 preload() { this.load.image("tiles", "tiles/dungeon_tiles.png") this.load.tilemapTiledJSON("dungeon", "tiles/dugeon-01.json") } 画面への描画# 読み込んだ JOSN ファイルのデータを使ってタイルマップのインスタンスを作成します。 そして、インスタンスにタイルセットの画像データを渡します。 最後に、creat
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 arcadeはphaser独自の物理エンジンでscene.physics(this.physics)などと記述されていることが多いです matterはMatter.jsの物理エンジンでarcadeと一緒に使ったり、matterだけ使ったりできます impactはImpact.jsの物理エンジンを使うようになります あまり例をみないのと詳しくないので興
アルフォード博士の悪夢
▼▼▼概要▼▼▼ このゲームは、黒宮ティマ様の描かれたキャラ「アルフォード博士」を動かすために作られた 二次創作アクションゲームです。 全１ステージで、プレイ時間は慣れて数分です。 セーブ機能はありません。 二段ジャンプ、ダッシュ、壁掴みなどがあり、操作難易度はやや高めです。 敵は出ません。自機の喪失もありません。アイテムを集めるとステージクリアです。 鬱ホラーな雰囲気ですが、びっくり要素はありません。 ▼▼▼操作について▼▼▼ 最初の画面にて、ＰＣでの操作か、スマホでの操作かを選べます。 マウスのクリックか、画面のタップにて選んでください。 ＰＣでは、ゲームパッド、キーボードによる操作が可能です。 詳細はプレイ中の画面右の画像で確認できます。 スマホでは、画面下の仮想ゲームパッドによる操作が可能です。 詳細はプレイ中の画面下のボタン上に文字で書かれています。 スマホはAndroid6のC
Phaser3をかじる本
Phaser3の導入からスプライトの表示、操作までの手順をまとめていきます。 この本を読むにあたり、下記の1点について経験がありますと、より理解しやすくなると思います。 1. JavaScriptをそれなりに使った事がある方
Google Maps JavaScript API has been loaded directly without a callback...対応 - Qiita
Google Maps JavaScript API has been loaded directly without a callback...対応GoogleMapsAPI Google Maps API で callback 云々の警告がでたから対応しようとしたら Google Maps 日本語ドキュメントが古いのか少しハマった。同じ人がいるかもなので備忘録。 Dynamic Library Import API に変更して解決。 概要：サンプルコード 概要 | Maps JavaScript API | Google for Developers Load the Maps JavaScript API サイドバーにリンクされてない Maps JavaScript API を読み込む | Google for Developers Register as a new u
イベントループとプロミスチェーンで学ぶJavaScriptの非同期処理
JavaScript の非同期処理は非常に難しく、その難しさの原因は「制御の流れ」が掴みづらいことにあります。 この本では非同期処理を理解するために必要な概念であり、仕組みでもあるイベントループでプロミスチェーンの処理がどのように行われるかをクイズ形式で学ぶことによって、非同期処理の「制御の流れ」を掴めるように訓練します。 知識面については中枢となるイベントループの機構から、実行環境と API、async/await や Promise.all などの一通りの範囲を学習し、最終的には並列化や順序づけて反復処理を行うための制御方法と TypeScript での型注釈までを網羅します。
Instafeed.jsで案内されているトークンジェネレータの代替サービス
問題 Instafeed.jsというサービスを用いて、インスタグラムの画像を自身の Web ページに掲載しようとしたところ、案内されている Heroku のパッケージInstagram Token Agentが一部機能有料化のため、使用できなくなっていました。 ※issueにも上っていた 対応方法 Instant Tokensというサービスでトークン取得処理を代替する 手順 1. Instagram 基本表示 API の設定 API のドキュメントの手順に従ってステップ 6 までの工程を行い、アクセストークンが取得できるようにする 2. Instant Tokens とインスタグラムアカウントを連携する Instant Tokensにアクセスし、アカウント登録を行う インスタグラムアカウントを連携する 設定を開き、JS ファイルの URL もしくは リクエスト先 URL を取得する Ins
モーダルウインドウの背景を上下にスクロールせず固定する方法 | imasashi.net
モーダルウインドウが開いた際に裏のページが上下してしまう問題、CSSだけで固定できないかと試行錯誤したのですが、iOSのSafariでどうしても挙動が安定しなかったので、とうとうJavaScriptで実装することにしました。ちょっと悔しい。 基本的な考え方 背景が固定された状態(position : fixed状態)のスタイルを作っておく モーダルの表示/非表示と、背景固定のオン/オフをJSで連動させる モーダルを表示する際に、現在のスクロール位置をJSで取得してCSSに渡す という感じでがんばります。 HTML モーダルウインドウを開く要素に、例えば class=”modalOpner” とクラスをつけておく モーダルウインドウを閉じる要素に、例えば class=”modalCloser” とクラスをつけておく CSS 背景が固定されている状態のスタイルを定義しておきます。 body.f
moment.jsのisBetween()の比較対象に、当日も含ませる方法 - Qiita
背景 カレンダー形式のDatePickerで開始日と終了日を選択して、該当する期間の要素だけを連想配列から取り出したいというもの。 実装できたものの、自分が体験してきた検索は当日が含まれるモノばかりだった気がして、UX的にもそっちの方がいいと思ったため、調べた。 日付の比較にはmoment.jsを使用した。 ここにメソッドが載ってます。 やりたいこと momment.jsのisBetween()の比較対象に当日も含ませたい。 通常はこれ。間であればtrueを得ることが出来る moment('2010-10-20').isBetween('2010-10-19', '2010-10-25'); // true
おすすめライブラリつまみ食い | 第1回 Moment.js
ISO 8601のパースにも対応 また、ISO 8601*という日時の形式があるのですが、IE8やiOS4、Android2.2などはこの日時の形式のパースに対応していません。ISO 8601は2012-10-20T15:30:50+09:00のような形式です。この文字列をDateの引数に指定してパースしようとすると、対応していないブラウザではInvalid DateやNaNとなってしまいます。 // Android2.2などでInvalid Dateとなる var d = new Date('2012-10-20T15:30:50+09:00'); *注：ISO 8601 ISO 8601は日時の表記に関する国際規格。最新は2004年版ISO 8601:2004です。 この形式が採用されていることは少なくなく、APIのデータがこの形式で返す場合などは、一度Dateオブジェクトに渡す前に置
iOSを“区別”したモーダル背景のスクロール固定 - Qiita
概要 つい先日Win7のサポートが終わり、2020年4月以降にはEdgeもChromium製にアップデートされるとのことで、ようやくIEの壁から目を逸らせる雰囲気になってきた先にそり立つ第二の壁ことiOS Safari（個人の感想です）。 数多のトラップがiOSのアップデートのたびに仕込まれるこのブラウザですが、なまじ日本における（iPhoneの）シェア率が高いばかりに泣く泣く対応せねばなりません。どこかで聞いた話ですね 今回はその中でもモーダルウィンドウを用いるサイトの対応について、iOSかそれ以外かを区別することでうまいこと実装できた気がするので備忘録として投稿します。 あくまで差別ではなく“区別”です。 ……iOS版のVivaldiはやく出ないかな。（Safariを虚ろな目で見つめつつ） 要望と仕様 モーダルウィンドウなどのコンテンツに被る情報が表示されているあいだ、背景となったコン
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
luxon - Immutable date wrapper
スライダープラグイン「Swiper」で前後の画像を表示する | WEB改善事例集(GMOソリューションパートナー株式会社)
