【Phaser.jsでSvelteゲームアプリを作る①】SvelteアプリにPhaser3をインストールする
※ 当ページには【広告/PR】を含む場合があります。
2024/07/15
![合同会社タコスキングダム|TacosKingdom,LLC.](/articles/article112/__4.jpg)
+ 『Unity』で簡単な2D/3Dゲーム・Webページ制作
+ 『Python』を使ったロボット・AIプログラミング
SvelteアプリにPhaserをインストールする
![合同会社タコスキングダム|タコキンのPスクール](/articles/article112/__1.jpg)
canvas要素
![合同会社タコスキングダム|タコキンのPスクール](/articles/article112/__2.jpg)
.
├── README.md
├── index.html
├── package.json
├── public
│ └── vite.svg
├── src
│ ├── App.svelte
│ ├── app.css
│ ├── assets
│ │ └── svelte.svg
│ ├── lib
│ │ └── Counter.svelte
│ ├── main.ts
│ └── vite-env.d.ts
├── svelte.config.js
└── vite.config.ts
Phaser.js
$ yarn add phaser
src/assetes/svelte.svg
src/lib/Counter.svelte
assets
lib
.
├── README.md
├── index.html
├── package.json
├── public
│ └── vite.svg
├── src
│ ├── App.svelte
│ ├── app.css
│ ├── assets
│ ├── lib
│ ├── main.ts
│ └── vite-env.d.ts
├── svelte.config.js
└── vite.config.ts
App.svelteの書き換え
App.svelte
<script>
import Phaser from "phaser";
//👇Phaserゲームの基本設定・開始
new Phaser.Game({
type: Phaser.AUTO, //👈レンダリングタイプ(CANVAS/WEBGL/AUTO)
width: 800, //👈画面幅
height: 600, //👈画面高さ
//👇物理エンジンの設定
physics: {
default: 'arcade', //👈使用する物理エンジン
arcade: {
gravity: { x: 0, y: 300 }, //👈重力方向と強さ
debug: true //👈デバッグモードON
}
},
input: {
keyboard: true //👈キーボード入力の有効化
},
});
</script>
script
new Pahser.Game(...)
canvas
app.cssの書き換え
:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
}
body {
margin: 0;
}
index.htmlの書き換え
index.html
<!doctype html>
<html lang="jp">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>はじめてのPhaser</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
何もしない空のPhaserゲームを立ち上げてみる
$ yarn dev
![合同会社タコスキングダム|タコキンのPスクール](/articles/article112/__3.jpg)
まとめ
記事を書いた人
ナンデモ系エンジニア
これからの"地方格差"なきプログラミング教育とは何かを考えながら、 地方密着型プログラミング学習関連テーマの記事を不定期で独自にブログ発信しています。
カテゴリー