無理なことは無理
2021-02-13日記コンテンツ・JavaScript を使ったゲーム制作について書こうと思ったんですよ。
・解説記事をね。
・大変すぎる……。
・なんだこの作業は……。
・世の解説記事を書いてくれてる人達は凄い偉い。
・ハァ……ハァ……。
・途中まで作ったので出来てる分だけ置いときます。
・最後まで読んでも何も出来ません。
・すまねぇ……世界……。
・ちなみに今から Phina.js を覚えようとするならこの記事がまとまっててよかったです。
・こんばんは、「JavaScript でクソゲー作ろう委員会」の吾味人美です。
・突然ですが皆様はクソゲーって作ったことありますか？楽しいですよね。え？作ったことがない…？オイ！！作れよ！！なぁ！！！！！！簡単だからよぉ！！！！！！
・ということで今日は「猿でも出来る[要検証]JavaScript でクソゲーを作ってインターネットで公開しよう」という記事を書こうと思います。
・最低限の知識とやる気さえあれば、公開までは辿り着けるはずなので何となくやることがない人はやってみてくれると幸いです。
・んじゃ、始めましょ。
目次
・はじめに
はじめに
・この記事では JavaScript のゲームライブラリである「Phina.js」を使ったゲーム制作についてことしか書きません。HTML、CSS、JavaScript について知りたい方は「Progate」などの学習サイトで勉強することをオススメします。
・一応、前述した知識が無くても当記事自体は楽しめるかも知れません。
・楽しめないかも知れません。
・どうせなら楽しんで行こうぜ！！！！
HTML ファイルを用意しよう
・早速「index.html」ファイルを作成して、下記をコピペして保存ください。
<!doctype html>
<head>
<meta charset='utf-8' />
<title>phina</title>
</head>
<body>
<script src='https://cdn.jsdelivr.net/npm/phina.js@0.2.2/build/phina.min.js'></script>
<script>
phina.globalize();
phina.define('MainScene', {
superClass: 'DisplayScene',
init: function () {
this.superInit();
this.backgroundColor = 'gray';
}
});
phina.main(function () {
const app = GameApp({ startLabel: 'main' });
app.run();
});
</script>
</body>
</html>
・分かってる。言いたいことは分かってる。""コイツ、マジじゃん""って思ってるんだろ？
・何も分からない人向けにメモ帳での作り方も用意したので使ってくれ…ファイル名、ファイルの種類、文字コードを画像通りに保存するんだぞ…
・Mac の人や他のテキストエディタ使ってる人も「index.html」というファイル名で、文字コード「UTF-8」で保存さえすれば OK よ。
・ファイルが作成出来たら早速ダブルクリックしてブラウザで表示してみよう。
・こんにゃくが表示されてますね。
・このこんにゃく部分がPhina.jsが描画している部分で、今後書いたプログラムはこの場所に描画されるっつーワケ。へ～～、案外楽勝じゃんね。
・なめるな！！！！
・プログラミングを……
・殺されるぞ……。
文字と四角を描画してみよう
・とりあえず、ゲームに必要そうな要素である文字と図形を表示させてみますか……。先程の「index.html」に処理を追加しちゃいましょう。
・文字と図形を表示させる為にはどこに処理を追加するかというと、初期設定である「init()」関数に追加してあげれば良さげです。
・文章を表示させるには Label クラスを使いましょう。
// === 抜粋 ===
init: function () {
this.superInit();
this.backgroundColor = 'gray';
new Label("こんにちは"); // ★ 追加
}
// === 抜粋 ===
・へ～、なんか思ったより分かりやすいね。
・「new Label("こんにちは")」って奴を追加したワケだけど、コレって「新しく"こんにちは"と書かれたラベルを作る」ってことでしょ？楽勝じゃ～ん。
・上記記述を追加したら、ファイルを保存して、ブラウザで更新してみましょう。
・二個前の画像と一緒じゃん。
・はい、上記処理では「ラベルを作成しただけで、画面上に表示していません」なので、画面に貼っつけてあげる処理を書きましょう。
// === 抜粋 ===
init: function () {
this.superInit();
this.backgroundColor = 'gray';
new Label("こんにちは").addChildTo(this);
}
// === 抜粋 ===
・addChildTo(this)というのは、ラベルを子要素として this に貼り付けるよ～ってことです。
・何かプログラムって和訳すると書いてて意味分かんなくなってきますね。
・どうせ上手く行かないと思ってたけど、さっきから一歩一歩が短すぎるだろ。
・はい、現在のラベルには「こんにちは」という表示する文字の情報はありますが、それ以外が一切設定されていません。なのでこんな辺鄙な場所に表示されてしまったんですね。可愛そうに。
・そんな可愛そうなラベルくんの表示位置を設定してやりましょ。
// === 抜粋 ===
init: function () {
this.superInit();
this.backgroundColor = 'gray';
new Label("こんにちは").addChildTo(this)
.setPosition(200, 200);
}
// === 抜粋 ===
・あ！こんにちはくんだ！可愛いね。
・setPosition は見ての通り表示位置を設定してあげる関数です。
GitHub に投稿しよう
・このサイト読んでその通りにやって。
