LoginSignup
14

More than 5 years have passed since last update.

MacでPhaser使ってゲーム作る話 #001 計画と素材の調達

Posted at

はじめに

GWに体調崩してどこにも行けないので、久しぶりにゲーム作ろうと思います。
ただ作るだけだとアレなので、いろいろ挑戦しようと思い、以下の制約を課しました。

  1. 使った事無いライブラリを使う事
  2. Macで遊べる事
  3. 素材の作成にMacだけを使う事
    1. なるべくフリー素材を使わず調達する事
    2. wineとかをもちいてWindowsのツールを動かすのはギルティ
    3. Windowsで使っていたツールと比較してみる
    4. 素材のクオリティは考慮しない
  4. 何かしらのオンライン要素を含む事

1と2について、今回はJavascriptのゲーム作成ライブラリであるところの、Phaserを使い、ブラウザゲームにする事にしました。
http://phaser.io

理由はenchant.jsに比べてTypescriptで書きやすかったからです。
Haxeでもやってみようかと思ったので、あとで同じゲームをHaxeに移植してみたいと思います。
殆ど調べてないですが、d.tsをHaxeの定義ファイルに変換できるみたいだし、1年半くらいActionScriptと戯れてたし、何とかなると予想。

何を作るか

初めて使う環境で何を作るか、といえば
シューティングゲームかアルカノイド(ブロック崩し)と相場が決まっています。
これは義務教育のような物です。初心者たるもの、いきなり上を目指しすぎると失敗します。
(別にマーリオみたいなゲームでもいいのですが、少し敷居が高いので)

今回は、横スクロールなシューティングゲームを作ります。そこについては一片の創意工夫も凝らしません。

素材を用意する

Windowsであればフリーのいいツールがいくらでもあるのですが、ぴゅあーなMac上で使えるツールを探すところからになります。

画像

pixenでポチポチ書きます。
https://github.com/Pixen/Pixen

僕が現役時代にWindowsで使っていたツールを100点とすれば、70点くらいでしょうか。減点ポイントとしては

  1. 1枚の画像からアニメーションを作れない(複数の画像を1枚にするのは多分楽にできる)
  2. 矩形選択 -> コピー -> ペーストすると、全く同じ位置に新しいレイヤーとしてコピーされる
    1. アクティブレイヤーにコピーもあるが、コピーもとと全く同じ位置にコピーされる
  3. 直線と曲線と四角形以外の図形が書けない(○とか)
  4. 文字入力が無い

2と4と5あたりは結構辛い印象。
特に2は僕的にかなり直感的とは言いがたい操作で、たとえば、32pix離れた場所に画像をコピーしたい場合、矩形選択してコピーした後、移動ツールに切り替えてコピー元の位置をずらしたあと、ペーストを行う必要があるようです。
正直言って、wineかなんかで、自分で使い慣れたツールをWindowsから引っ張ってきた方が楽かと。

おまけ:使いやすいドット絵エディタ

wine環境で動くか等は未チェックです。ぼくがちゅうがくせいだったころのツールです。
点画師鳳雛3
DotPainterALFAR

EDGEも大変便利なツールなので、使ってみてお好みで。

効果音

効果音に関しては、クオリティを要求するならフリー素材の力を借りる事になると思うのですが、今回は自作する事にします。
ガレージバンドでもなんとかなりそうですが、とくにこだわりが無ければBfxrがよさそうです。
http://www.bfxr.net

オンライン版があるのが少し評価高いです。
ある程度ジャンルを指定すると、ランダムな効果音が作成され、そこからパラメータを調整して音を作る訳ですが、生成した効果音の履歴が残っていて、いつでも戻れるのがツボを押さえていていいです。
波形選択やミキサも備えていて大変よろしいので、Windowsユーザーにもオススメできます。

BGM

ガレージバンドが無難でいいでしょう。昔を思い出しつつぽちぽち打つのも一興かと。

こちらも腕に自信がなければフリー素材をお借りした方が仕上がりがよいです。昨今自動作曲も盛り上がっていますね。難を挙げるとすれば、macでMIDIを扱う敷居が少し高いので、素材はmp3なりoggなりで用意した方がよいです。

音楽に限った話ではないですが、フリー素材の利用規約は大抵の場合において、ギッハブに公開するような事は想定されていませんので、利用する場合は権利者の方々に相談した方がよいでしょう。
(ギッハブでの公開が、2次配布にあたるか微妙なため)

公開方法

jsとリソースだけで構成されてるので、本来ならそれこそ、dropboxとかでも事足りるのですが、思うところがあってnode + expressで公開します。何かしらのオンライン要素、をつけるためです。

phaserを学ぶ

ドキュメント片手にチュートリアルをみる

Gameオブジェクトを作り、そこに、preload,updateなどの関数を叩き込んでいくようですね。
パッとみた感じ、Spriteに、ゲーム作成に必要な機能が片っ端から詰め込まれており、可読性の上昇にやや貢献していつつも、やや冗長でバカでかい印象を受けました。
(コンポーネント化された20個近いクラスを継承しており、kill()メソッドや時限消滅機能、物理演算、あたり判定にカメラ関係のメソッドまで生えてる)
ワシはただ画像を出したいだけなんじゃ!という場合には、Imageオブジェクトを使うとよいみたいです。物理演算やあたり判定等一部の継承をやめた、軽めのオブジェクトとなっています。

An Image is a light-weight object you can use to display anything that doesn't need physics or animation.

ってドキュメントにも書いてあるので間違いないでしょう。タイトルロゴとかに使ってね、とも書かれています。

phaserのサンプルを読む

http://phaser.io/examples/v2/games/invaders
http://phaser.io/examples/v2/audio/sound-complete
http://phaser.io/examples/v2/audio/play-music

とりあえずこの辺を読みます。
シューティングゲームには、ループ、あたり判定、複数オブジェクトの管理、開始終了条件など、ゲームに必要な要素が殆ど含まれていて初学者によいと(僕は)思います。
あとは音周りを適宜読む。

ひとまずまとめ

長くなりそうなのでphaserに関しては、別の記事にします。
ツールに慣れさえすれば、macでも以外と素材の用意は出来そうです。(個人的にpixenはちょっとむずがゆいですが)
先達の記事がありましたので、素材の調達に関してはこちらも参考になります。
ゲーム開発環境をWindowsからMacへ移行するための代替ツール

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
14