みなさん、こんにちは。どんぶラッコです。 本日は、 jsPDF と html2canvas という2つのライブラリを使ってWebページをPDFで保存できる機能を作ってみましょう！
kimuchaのブックマーク (10,871)
-
kimucha 2024/11/08
-
-
-
-
Phaser3 : event - ゲームプログラミングノート
今回はEventを使用してみます。 Events Events EventはPhaser.Events.EventEmitterから作ることができます。 create() { //イベントエミッタ this.emitter = new Phaser.Events.EventEmitter(); } onでエミットするイベントのkeyと実行する処理を設定し、emitでキーを指定して実行します。 create() { //イベントエミッタ this.emitter = new Phaser.Events.EventEmitter(); //イベントを登録 this.emitter.on("text", ()=>this.AddText(true), this); //イベントを実行 this.emitter.emit("text"); } またeventsはオブジェクトにも設定することができま
-
サウンド - Phaser3でスマホ対応ブラウザゲームを作る
Phaser3でスマホ対応ブラウザゲームを作る JavaScript対応のゲームエンジン「Phaser3」を用いて、スマホ対応のブラウザゲームを作る際のtipsをまとめたWikiです。 トップページページ一覧メンバー編集 サウンド 最終更新：ID:zWGpEtugdQ 2022年11月07日(月) 23:16:18履歴 Tweet preload内で画像と同じように読み込んで、create内で再生する。 preload() { this.load.audio('bgm', 'bgm.wav'); } create(){ this.music = this.sound.add('bgm'); } javascriptを使ってブラウザ上で音楽を再生したい際は、 ・ユーザ操作（タップなど）を検知してから再生する必要がある ・ユーザが他のタブに移動した際に音楽を一時停止したい場合、「blur|fo
-
Pheser3 エンドレスランナーチュートリアルを読む | なんとなしにこころむ
2021年1月8日 Pheser3のチュートリアルのどれを試そうかとみていたらエンドレスランナーというのがあったので読んでみた。 Stepを5段階で説明してくれている。 Step1: playerとplatformが白い四角で表現。platformはリサイクルしている。Step2: playerアニメーションStep3: コインが登場。platformも画像に。Step4: 背景に山。遠いので移動速度が他より遅く。Step5: 炎登場。当たり判定を表示より小さく。 ゲーム内容 タッチあるいはクリックによりジャンプする。ジャンプはジャンプ中にもう一度だけジャンプできる。炎に当たると焼け死ぬ。コインを取れる。画面下まで落ちると終わり。ゲームが自動的に開始する。 次のページで遊べる。 コード game.jsのコードにコメントを追加した。 // ゲームインスタンス let game; // ゲーム
-
Phaser3 シーン管理
Phaser3 シーン管理 前回の記事 https://mijinc0.github.io/blog/post/20200820_phaser3_about/ Phaser3のシーン管理について。 ※ typesriptで書くことを前提にしています 基本 Phaserのシーンを扱う時、チュートリアルに従って書くとSceneを継承したクラスを自分で用意することになると思う。 Sceneクラスにはinit,preload,create,updateを用意し、シーンが開始して終了するまで、それぞれのフェーズで必要な処理をそこに書いていく。 init : 主にpreload前にやっておきたい初期化処理を書く preload : 主にアセット(スプライトや音楽など)を読込む処理を書く create : シーンにタイルマップやスプライトを配置する処理を書く(シーンを作るメインはここ) update :
-
Phaser 3 | サンプルコードで利用している基本構造 | 1 NOTES
Phaser 3の記事で紹介しているサンプルコードに使っている全体的な基本構造です。 Phaser 3ではベースになるスクリプトの構造に様々な書き方があり、極力共通で使えるコードになるように考慮はしていますが、内容によってはサンプルコードが正常に動かないケースもあるかもしれません。 ゲームスクリプトの全体像を紹介しておくことで、問題の解決に繋がればと思います。 サンプルコードで利用している基本構造index.html <!DOCTYPE html> <html lang="jp"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1"> <title>サンプルコードの基本構造</t
-
Phaser3 Loaderプラグイン
Phaser3 Loaderプラグイン version : 3.52.0 Phaser3を使っていて、画像やサウンドなどのアセットを外部からロードするとき、Phaser3のチュートリアル通りにコードを書いていると、各シーンの preload 関数に、たとえば以下のように書いてアセットをロードすることになると思う。 // this === Phaser.Scene preload(): void { // loadはPhaser.Loader.LoaderPlugin this.load.json(...args); this.load.spritesheet(...args); } 通常はこれで良い。が、いろいろとやっていくとPhaser3のプリセットにないファイル形式のファイルを自分でロードしたくなることがある。例えば以下のような場合。 多言語対応したが、全ての言語で同じフォントを使うわ
-
【Phaser3】当たり判定を1回だけ処理する方法をUnityから着想を得て解決 - Qiita
現在（2022/12/30）、RecursionCSにて上級者向けのチーム開発に取り組んでいます。 ゲーム画面の描写にCanvasAPIとPhaser3を使用。 その中で、「1回だけ当たり判定を行う」というシンプルな処理に思いの外手間取ったので、解決方法を記録として残します。 【解決策】クラス変数に当たったかどうかの状態を持たせておく export class GameScene extends Scene { private hit: boolean; constructor() { super({ key: 'GameScene' }); this.hit = true; // ヒットしたかどうか状態を判別する変数 } // ～～中略～～ create() { // ～～中略～～ this.physics.add.collider( this.player, this.explosio
-
-
Phaser3 メモ
var config = { type: Phaser.AUTO, width: 800, height: 600, scene: { preload: preload, create: create, update: update } }; var game = new Phaser.Game(config); function preload () { this.load.image( ... } function create () { this.add.image( ... } function update () { ... } class MyScene extends Phaser.Scene { constructor (config) { super(config); } preload () { this.load.image( ... } create () { th
-
Phaser3＋typescriptでSRPGを開発してみる #004 マップ作成 - 旧プログラマーによる日曜プログラミング日記
こんにちは！ 次に着手したいのが、まずは動くものを作りたい、ということでタイルチップの読み込みです。 タイルチップとは、昔ながらの2D（3Dもそうかもですが）ゲームを作るときのバックの絵のことです。 スーパーマリオのブロックとか、ドラクエの地図マップとか、そんなイメージで、 SRPG作るときにもまず必要になりそうな気がします。 マップ作成(1) マップ作成(1) マップのタイルチップ ライフサイクル GameScene.ts TilemapConfig より複雑なマップに 過去の日記 マップのタイルチップ まずはタイルチップを取得して画像ファイルを読み込みます。 今回は、ドット絵世界、から草原のタイルチップをお借りしてまいりました。 草原チップ yms.main.jp 画像ファイル(png等)はpreload()関数の中で読み込みます。 this.load.image("PLAIN_MAP
-
Phaser3をかじる | なんとなしにこころむ
2021年1月7日2021年1月9日 PhaserはHTML5ゲームを作成するために使用できる2Dゲームフレームワークだそうだ。初めのリリースが2013年だが、2020年も更新されている。チュートリアルをひとつやってみた。 トップページの[LEARN]をクリックして開くページで[Making your first Game]というチュートリアルをやってみた。このチュートリアルはとても親切で200行ほどのコードを10段階に分けて説明してくれている。残念ながら日本語版がないがブラウザの翻訳機能を使えば内容は理解できる。zipファイルをダウンロードすればコードを入力しなくても大丈夫だ。part10.htmlが完成版だ。 Local phaser3を動かすのにローカルでもWebサーバーが必要とのことで、いつもWordPressで使っているLocalで動かしてみた。サイトを作るとPhaserではいら
-
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
公式Twitter
- @HatenaBookmark
リリース、障害情報などのサービスのお知らせ
- @hatebu
最新の人気エントリーの配信
キーボードショートカット一覧
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Copyright © 2005-2025 Hatena. All Rights Reserved.
設定を変更しました