Results for category "SimCityもどきができるまで(enchant.jsを使って)"

EnchantCityチュートリアル


SimCityにタワーディフェンスの要素を加えた街作りシュミレーションゲーム。

12月1日から始まり、クリスマスを迎えるまで、道路や住宅地、商業地を建設して住民を住まわせ、
工業地を建設してモンスターを倒してお金を稼いで街を発展させよう。
人口100人達成してクリスマスを迎えると何かが起こる!

上記リンクからゲームを開始できるが、最初何をしたら良いかさっぱり分からないと思うので、手順(チュートリアル)を説明する。

まず画面構成から説明します。

enchantcity.01.00.statusmenu
画面の一番上にあるのがステータスメニューです。
enchantcity.01.01.date
ステータスメニューの一番左が日付を表します。
12月1日から始まり、ゲーム内独自の時間でリアルタイムに進んでいきます。
時間を止めることはできません。

enchantcity.01.02.population
次に右が人口を表します。
このゲームの目的は、人口を増やすことなので、一番重要なパラメータです。
最初は0人で、後述する住宅地を建てると人口が増えます。
しかし、人がモンスターに殺されたり、住宅地がモンスターに壊されるか、ユーザー自らに壊されると人口も減ります。

enchantcity.01.03.cash
次に右がお金を表します。
お金は最初50から始まり、
建物を建設するとお金が減り、モンスターを倒すとお金が増えます。
建物の建設費とモンスターを倒したときに貰える額は以下の通り。
道路:2減
住宅地:5減
商業地:10減
工業地:10減
モンスターを倒すと1増

enchantcity.01.04.bgm
次に右がBGMボタンです。
BGMをオン/オフできます。
最初はオンになっている。
※現在、IEではBGMが再生されないバグあり。

enchantcity.01.05.end
一番右が終了ボタンです。
終了ボタンを押すとダイアログが表示されて本当に終了するか聞いてくるので、
「はい」を押すとゲーム終了。
このゲームはユーザー自ら終了しない限り、永遠と動き続けます。

enchantcity.02.00.mainmenu
次に一段下がってメインメニューを説明します。

enchantcity.02.01.road
一番左が道路建設ボタンです。
道路建設ボタンを押してチェックにした状態で、フィールドをクリックすると道路を建設できます。
ただし、道路は後述する高速道路に繋がっていないと建設できません。
また、海にも建設できません。
草原、森林、砂漠は建設でき、どれに建設しても効果は同じです。
道路を建設するためには、お金が2かかります。

enchantcity.02.02.region
次に右が区画ボタンです。
区画ボタンを押すと下段に区画メニューが表示され、住宅地、商業地、工業地を建設できます。
区画メニューについては、後ほど説明します。

enchantcity.02.03.destroy
次に右が破壊ボタンです。
破壊ボタンを押してチェックにした状態で、建物をクリックすると破壊できます。
ただし、高速道路と他の建物を切断する破壊はできません。
道路を破壊したいときは、高速道路から一番遠い道路から順番に破壊してください。

enchantcity.02.04.cursor
一番右がカーソルボタンです。
破壊ボタンを押してチェックにした状態で、建物をクリックすると建物ダイアログが表示され、建物に入っている人の種類と数が分かります。
建物ダイアログについては、後ほど説明します。

enchantcity.03.00.regionmenu
メインメニューで区画ボタンを押すと区画メニューが表示されます。
区画メニューについて説明します。

enchantcity.03.01.town
一番左が住宅地ボタンです。
住宅地ボタンを押してチェックにした状態で、フィールドをクリックすると住宅地が建設できます。
ただし、道路に隣接した場所にしか建設できません。
また、海にも建設できません。
草原、森林、砂漠に建設でき、どれに建設しても効果は同じです。
住宅地を建設するためには、お金が5かかります。
住宅地を建設すると高速道路から家族(労働者1人、買い物客1人、学生2人の計4人)が引っ越してきます。
住宅地はモンスターに入居されると、破壊されます。
住宅地は労働者が12時間以上、家賃を支払わないと、倒産します。
住宅地が破壊された場合、その住宅地に入居中の家族も消滅します。
住宅地に怪我をした家族が入居していると、救急車マークが表示されます。

enchantcity.03.02.castle
次に右が商業地ボタンです。
商業地ボタンを押してチェックにした状態で、フィールドをクリックすると商業地が建設できます。
ただし、道路に隣接した場所にしか建設できません。
また、海にも建設できません。
草原、森林、砂漠に建設でき、どれに建設しても効果は同じです。
商業地を建設するためには、お金が10かかります。
商業地は買い物客が食べ物を買うために必要です。
商業地には、買い物客が同時に5人まで入ることができます。
買い物客について後ほど説明します。
商業地はモンスターに入居されると、破壊されます。
商業地は買い物客が12時間以上、買い物に来ないと、倒産します。

enchantcity.03.03.dungeon
一番右が工業地ボタンです。
工業地ボタンを押してチェックにした状態で、フィールドをクリックすると工業地が建設できます。
ただし、道路に隣接した場所にしか建設できません。
また、海にも建設できません。
草原、森林、砂漠に建設でき、どれに建設しても効果は同じです。
工業地を建設するためには、お金が10かかります。
工業地を建設するとゲーム内時間で30分おきにモンスターが出現します。
工業地ダイアログからモンスターの出現を一時停止できます。
モンスターについて後ほど説明します。

次にフィールドについて説明する。
enchantcity.04.01.highway
これは高速道路です。
高速道路は街の入り口となるため、非常に重要です。
道路は高速道路に繋がっていないと建設できません。
また、住宅地を建設した場合、高速道路から家族が引っ越してきます。
高速道路は建設できないし、破壊もできません。

enchantcity.04.02.sea
これは海です。
海には建物を建設できません。

enchantcity.04.03.grass
enchantcity.04.04.desert
enchantcity.04.05.forest
上から順に草原、砂漠、森林です。
これらに建物を建設できます。
また、効果も同じで、見た目以外の違いはありません。

以上で画面の説明は終わりです。
次は手順(チュートリアル)を説明します。

enchantcity.05.01.tutorial
手順1.
まずは、上記のスクリーンショットの通り、高速道路の隣に道路を2つ建設しましょう。

enchantcity.05.02.tutorial
手順2.
次に、上記のスクリーンショットの通り、道路を囲むように住宅地を3つ建設しましょう。
住宅地を建設すると、高速道路からそれぞれの住宅地に家族が引っ越してきますよ。

enchantcity.05.03.tutorial
手順3.
次に、上記のスクリーンショットの通り、商業地を1つ建設しましょう。
商業地を建設すると、住宅地から買い物客が商業地へ買い物に行きますよ。

enchantcity.05.04.tutorial
手順4.
次に、上記のスクリーンショットの通り、縦に道路を5つ建設しましょう。

enchantcity.05.05.tutorial
手順5.
次に、上記のスクリーンショットの通り、道路の端に工業地1つ建設しましょう。
工業地を建設してからゲーム時間内で30分経つと、工場地からモンスターが出てきます。
さらに、労働者がモンスターを倒しに住宅地から出てきますよ。
労働者がモンスターを倒すと、お金が1増えます。
こうして、街の住人の生活が始まりました。

チュートリアルで示した配置は言わば定石で、この配置では順調にお金が増えていきます。
ここからさらに街を発展させるのはプレイヤーの腕次第。
人口100人達成してクリスマスを迎えると何かが起こる特典付きです。

次はキャラクターについて説明します。

worker worker.02
これは労働者です。
住宅地1つに付き、1人入居できます。
工業地からモンスターが出現した場合、労働者の体力が1以上の場合、労働者はモンスターを倒しに出勤します。
ただし、労働者の行動範囲は10マスです。
モンスターが住宅地の10マス以内に来ないと労働者は出勤しません。
体力が1以上の場合にモンスターに接触すると、モンスターを倒せます。
体力が0の場合にモンスターに接触すると、怪我をします。
怪我をすると紫色に変色し、住宅地から出れなくなります。
モンスターを倒すとモンスター1匹に付き、体力が1減り、お金1と家賃1が増えます。
体力が0になると住宅地に戻ります。
労動者の家賃が1以上の場合、労働者は住宅地に家賃を支払います。
労働者は最初街に引っ越してきたときは、体力0、家賃0です。
体力は買い物客から食べ物をもうらことで、食べ物1つに付き、体力が1回復できます。

shopper shopper.02
これは買い物客です。
住宅地1つに付き、1人入居できます。
同じ住宅地に労働者が入居していて、かつ、労働者の体力が0の場合、買い物客は労働者に食べ物を与えます。
食べ物が0の場合、商業地へ食べ物を買いに行きます。
ただし、買い物客の行動範囲は10マスです。
商業地が住宅地の10マス以内にないと買い物へ行きません。
食べ物を買うのにお金はかからりません。
買い物客1人に付き、食べ物は1つしか持てません。
モンスターに接触すると怪我をします。
怪我をすると紫色に変色し、住宅地から出れなくなります。

student2student student0.02student1.02
これは学生です。
住宅地1つに付き、2人入居できます。
今のところ学生に役割はありません。
モンスターに接触すると怪我をします。
怪我をすると紫色に変色し、住宅地から出れなくなります。

monster
これはモンスターです。
工業地からゲーム時間内で30分間隔で出現します。
モンスターは住宅地と商業地を目指して、襲ってきます。
襲う建物が無い場合は高速道路を目指します。
モンスターは労働者と接触した場合、労働者の体力が1以上ある場合、倒されて、労働者にお金1と家賃1を与えます。
労働者の体力が0の場合、労働者に怪我をさせて、モンスター自身は死にます。この場合は、何も与えません。
モンスターは買い物客と接触した場合、買い物客に怪我をさせて、モンスター自身は死にます。
モンスターは学生と接触した場合、学生に怪我をさせて、モンスター自身は死にます。
モンスターは住宅地に入居した場合、住宅地を破壊して、モンスター自身は死にます。
モンスターは商業地に入居した場合、商業地を破壊して、モンスター自身は死にます。
 
次はエフェクトについて説明します。
 
enchantcity.07.01.destroy
これは建物が破壊された場合に表示されるエフェクトです。
ユーザー自ら破壊した場合、モンスターによって破壊された場合に表示されます。
建物が破壊されると、その土地は更地に戻ります。
 
enchantcity.07.02.liquidate
これは住宅地の賃貸が支払われなった場合、商業地に買い物客が来ない場合に建物が倒産する場合に表示されるエフェクトです。
建物が倒産すると、その土地は更地に戻ります。
 
enchantcity.07.05enchantcity.07.06
これは工業地を稼動停止した場合に表示されるエフェクトです。
工業地を稼動停止した場合は、工業地に停止マークが赤く点滅します。
 
enchantcity.07.03enchantcity.07.04
これは住宅地に怪我をした家族が入居している場合に表示されるエフェクトです。
住宅地に怪我をした家族が入居している場合は、住宅地に救急車マークが紫色に点滅します。
 
次は建物ダイアログについて説明します。
 
enchantcity.08.01enchantcity.08.02
これは住宅地ダイアログです。
W, Sp, Stの文字は下記の意味を持ちます。
W: 労働者の怪我人数 / 労働者の住居人数
Sp: 買い物客の怪我人数 / 買い物客の住居人数
St: 学生の怪我人数 / 学生の住居人数
また、救急車マークのボタンは治療ボタンです。
住宅地に怪我人が全く居ないときは白くなり、1人でもいると赤くなります。
治療ボタンを押すとその住宅地の怪我人を全員治療します。
治療には1人に付きお金2がかかります。
お金が足りない場合は治療できません。
 
enchantcity.08.03
これは商業地ダイアログです。
W, Sp, Stの文字は下記の意味を持ちます。
W: 商業地に訪れいてる労働者数
Sp: 商業地に訪れいてる買い物客数
St: 商業地に訪れいてる学生数
 
enchantcity.08.04enchantcity.08.05
これは工業地ダイアログです。
工業地が稼動している場合は稼働中が表示され、停止している場合は停止中がが表示されます。
また、再生ボタン/停止ボタンを押すことで、稼動/停止を切り替えられます。
 
次はゲーム内の生活サイクルについて説明します。
1.住宅地が建設されると、家族が入居します。
 新規入居時点の家族は、労働者の体力0、家賃0、買い物客の食べ物0です。
2.商業地が建設されると、買い物客が商業地へ食べ物を買い物に行きます。
3.買い物客が買い物した商業地は、12時間倒産しません。
4.買い物を終えた買い物客は住宅地へ戻ります。
5.住宅地に戻った買い物客は労働者に食べ物を与えます。
6.食べ物を与えられた労働者は体力が回復します。
7.食べ物が無くなった買い物客は、また商業地へ買い物へ行きます。
8.工業地が建設されると、モンスターが出現します。
9.体力の回復した労働者は、モンスターを倒しに行きます。
10.モンスターと接触した労働者は、体力が0になる代わりに、モンスターを倒して家賃を1得ます(このとき、ユーザーはお金を1得ます)
11.モンスターを倒した労働者は住宅地へ戻ります。
12.住宅地に戻った労働者は、住宅地に家賃を支払います。
13.家賃が支払われた住宅地は12時間倒産しません。
14.買い物客は体力0の労働者に食べ物を与えます。
15.以下、上記の生活サイクルの繰り返しです。

ただし、上記の生活サイクルが崩れるケースがあります。
そのケースは以下の通り。
A.モンスターが住宅地に入居した場合、住宅地が破壊され、その住宅地に入居している家族も消滅します。
B.モンスターが商業地に入居した場合、商業地が破壊され、その商業地で買い物している買い物客も消滅します。
C.モンスターが体力0の労働者と接触した場合、その労働者に怪我をさせます。
D.モンスターが買い物客と接触した場合、その買い物客に怪我をさせます。
E.モンスターが学生と接触した場合、その学生に怪我をさせます。
F.12時間家賃が支払われなかった住宅地は倒産し、その住宅地に入居している家族も消滅します。
G.12時間買い物客が買い物しなかった商業地は倒産します。

※なお、BGM、効果音は魔王魂様のサイトから拝借しました。
音楽素材/魔王魂

※キャラクターグラフィックはESPRI様より拝借しています。
espri-Q


0

SimCityもどきはEnchantCityと名づけよう

構想一ヶ月前、本格的に着手したのは、ゴールデンウィーク明けなので、はや3週間ぐらいでしょうか。
とりあえず、3割ぐらいはできた。
街に労働者が来て、住居に住み、工場(ダンジョン)に働きに行く。までができた。
といっても、賃金の計上やら、労働者が少ないダンジョンからはモンスターが現れるとかの処理はできてない。
買い物客や学生もできてないけど、これは労働者のアルゴリズムの応用でできるので、あまり問題視してない。
それよりも、問題ありそうなのが、処理が重いことと、建物の破壊と建設を繰り返すと徐々にメモリが増えていくことだ。
ブラウザの対応状況では、
IE: 完全動作
Chrome: BGMがまともに再生されない。(それ以外は動く)
firefox:処理がめちゃくちゃ重い。ボタンの動作がおかしい。
Safari: 読み込みで止まる(オーディオ系のファイルに問題があるみたい)
とIE以外は問題あり。
これから、リファクタリングなどの大改造を施すかも知れないので、とりあえず、現状を中間報告としてアップしておく。
http://9leap.net/games/3339
※前述の通り、問題多々有りなので、動作保証はできません。
※ゲーム内時間で18時になると、労働者が街にやってきて、住居に住みます。そして、翌日6時に工場へ働きに行く。
※道路、住商工の建設&破壊可能。
※なお、BGM、効果音は魔王魂様のサイトから拝借しました。
音楽素材/魔王魂


0

ゲーム基礎設定

アイデアノート的にゲームの基礎設定をメモっておきたいと思います。

最初、見た目もSimCityっぽくしたかったのですが、
enchant.jsで用意されている画像素材がアクションゲームとかRPG風のものしかなかったので、
ゲームの雰囲気はRPGの街を育てるゲームにしました。
ちなみに私は”元”ゲームプログラマーなので、プログラミングは得意ですが、絵を描くのが物凄く苦手です。
最初自分で簡単な絵を描いてお茶を濁そうと思ったのですが、それすらできませんでした。
enchant.jsのライブラリを見てると物凄く懐かしいドット絵ゲームのテクニックが満載で昔に帰ったような気分になりました。
と言っても、私がゲーム作ってた頃は、すでにポリゴンだったんですけど。

そんなことはさておき、そのドット絵と配役、機能、ゲームシステムを書いていきましょう。

town
町:SimCityにおける居住区です。
 町を建てるとそこに人が住み始めます。
 ただ、人々は住む場所だけがあっても生活できません。他に買い物などを行う城とお金を稼ぐためのダンジョンが必要です。
 町には住める人数に上限があります。

castle
城:SimCityにおける商業区です。
 町の住人が城へ買い物にやってきます。また学生が勉強するための学校も兼ねています。
 城と町は近く建てた方が良いです。
 遠いと買い物や学校へ通うのに時間がかかって食料の補給や学力の向上に支障をきたします。
 ただ町の住人は町から一番近い城を目指しますので、城へ住民が殺到し交通の便が悪くなっても、通うのに時間がかかってしまいます。
 城にも入れる人数の上限がありますが、町より大人数を収容できます。

dungeon
ダンジョン:SimCityにおける工業区です。
 ダンジョンは町の労働者がダンジョンのモンスターを倒してお金を稼ぐ場所です。
 ダンジョンは町や城からある程度離した方が良いでしょう。
 定期的にダンジョンからモンスターが出てきて、一番近い町や城を襲いに来ます。
 ただ移動速度が遅いので町・城とダンジョンを十分な距離を開ければ、襲われるまで時間稼ぎできます。
 労働者がモンスターを倒しに行くのですが、出勤時間と退勤時間が決まっています。
 労働者はモンスターよりも移動速度が速いです。
 しかし、町とダンジョンの移動距離があまりに遠くダンジョンに到達する前に退勤時間になってしまうとモンスターを倒さずに帰ってしまいます。
 ダンジョンはある程度モンスターが倒されると中級、上級とランクの高いモンスターを排出するようになります。
 モンスターのランクアップを合わせて、労働者のランクも上げる必要があります。

field
フィールド:町、城、ダンジョンを建てるための土地全般です。
道:町、城、ダンジョンの交通をつなげる。
 道につながっていないと住民はその場所までたどり着けません。

worker
労働者:SimCityと同じ労働者です。
 ダンジョンまで行ってモンスターを倒してお金を稼ぎます。
 最初は下級労働者ですが、お金と学力が貯まるごとに中級、高級と3段階のランクが上がっていきます。 
 労働者は出勤時間と退勤時間が決まっていて、出勤時間に町から出てダンジョンまで行って、退勤時間に町に帰ってきます。
 町に帰ってくると、買い物客が買って帰ってきた食糧を食べて体力を回復します。
 体力が回復していないと次の出勤ができません。

shopper
買い物客:SimCityと同じ労働者です。
 主に労働者のための食料を城まで買いに行きます。

student2student
学生:SimCityと同じ学生です。
 勉強するために城まで通います。
 学生が勉強すると学力が上がります。
 学力は労働者のランクアップに必要になります。

monster
モンスター:ダンジョンから定期的に出てきて町や城を襲おうとします。
 労働者より移動速度が遅いので、ダンジョンと町・城の間を十分な距離があれば、労働者が倒してくれるでしょう。

その他の要素
家族:必ず住人は労働者1人、買い物客1人、学生2人の構成で住んでいます。


0

SimCityもどきができるまで(enchant.jsを使おう)

chat.acを立ち上げたあとの
次なる野望はブラウザで気軽に遊べるSimCityもどきのゲームを開発しようと考えてます。

それで、開発環境を色々と調べてたら、
enchant.jsってのが良さそう。
enchant.js
http://enchantjs.com/ja/

これはHTML5 + JavaScriptを使ったゲーム開発用フレームワークとのこと。
9leapと言うゲーム投稿サイトには、
このフレームワークを使って1000本以上のミニゲームが作られているそうな。
そのミニゲームを見るとファミコンレベルのゲームは作れそうな感じ。
ファミコンレベルのゲームが作れるならシムシティぐらい作れるんじゃないか?

さらにenchant.js入門と言う分かりやすそうなチュートリアルがあったので、
私も試しに作ってみると簡単にゲームっぽいものができた。
これがそれ。
http://chat.ac/game/index.html

こうやってブラウザだけでゲームが動くのは他に変えがたい魅力だ。
しばらく、この環境で開発してみようと思う。


0