忍者ブログ

幻日記

お絵描き&ゲーム制作好きの ひとりごと日記

HTML5+JavaScriptゲーム制作3

twitterにて進行状況を随時アップしてます。
このブログではその動画をまとめてご紹介!

twitterの埋め込み動画は幅や高さを指定できなさそうなので
残念ながら大きな動画がボンボン出てくる記事になっちゃいました。
そのため「つづきを表示」から表示いたしまする。

拍手


HTML5+Javascriptゲーム制作2

少し前にtwitterに載せた動画。アクションゲームの衝突判定の基礎部分が完成しています。
言語は違えど完全にFlash+AS3時代と同じ仕組みで動いています。

今後実装していきたいのは
・異なったオブジェクトへの衝突判定
 (上の動画では足場全てが1個のオブジェクトとしてまとまってる)
・敵やアイテムの追加
・セーブ機能の追加
ですね。

キャラクターとか世界観なんかのビジュアル面は全然決めてないので
主人公が男か女になるかも未定です。性別を選択できるというのが
一番良さそうに見えるけど、ゲームを作ってると欲張れば欲張るほど
途中で挫折しやすくなるのでどちらかに決めないといけなさそうだね(´ω`)

拍手


HTML5+Javascriptゲーム制作

HTML5(canvas)とJavascriptでのゲーム制作をしています。


操作できない場合は画面下部のグレー部分をクリックするか、
それでもダメなら下記の直リンクをお試しくださいませ


直リンクはこちら


(新しいプログラム言語を学ぶということで

 Flash+AS3のテストゲームを始めて作った時のモノに似せてます。)


■操作方法:←or→=移動 ↑=ジャンプ
しかもジャンプの際に↑キーを押す必要があるのですブラウザのスクロールバーが動いてしまう。
まだまだFlash+AS3の時のように簡単にはいかないようですね(・へ・`;)
修正済しました。「preventDefault();」を利用。


ゲームの完成系としてはSLG(※←シミュレーションゲームのこと)を目指しているのですが
Javascriptを勉強し始めて間もないので、作り慣れたアクションゲーム風でテストしています。
また、今回はキーボードのみの操作なのでPC以外の操作には対応しておりません。
今後はスマホなどでも遊べるゲームを作っていけると面白そう。






さて、時代の流れでもありますが、残念ながらFlashがオワコンになっちゃいました。
あの有名なブラウザゲーム「艦これ」などではまだ使われているようですが今後どうなるやら。
そんなもんで現在ActionScript3.0からJavascriptへ乗り換えている最中です。


AS3の時は変数宣言の際にint、String、Booleanなど型を指定する必要があったのですが
JSでは何も書く必要がないようです。この辺りは1番ビックリしました。他にも
オブジェクトの幅や高さを表す「.width」や「.height」を自分でこさえないといけないようです。


また、AS3の時はイマイチ理解できなくて手を出さなかった『ライブラリ』というのを
試しています。難しいことなのでイマイチ理解できていないのですが、ここでは
CreateJSというのを使っています。Flash+AS3の頃の感覚にかなり近いので助かっています。


やるやる詐欺常習犯なのでゲームを完成させるなんて書けないけど
今後は納得いくところまで作っていければ楽しそうだと思いました(´ω`)


更新履歴:
9/23:
・グレー部分を拡大、ついでに説明文を追加
・ゲーム画面のサイズをCSSにより640×480を480×360に縮小


10/5:
・ゲームデータを置いてる場所をDropboxから忍者サンドボックスに変更しました。
 Dropboxの仕様変更で10/3からは、この記事を表示すると
 HTMLが勝手にダウンロードされてしまう仕様に変更されていたようです。

拍手


Flash+AS3シミュレーションゲーム制作

まだプログラムは手をつけてないし絵らしい絵も描けてないですが
創作ゲームの設定を練るラフ的なモノを載せてみます。


メイン画面
 
いくつか私の好きなシミュレーションゲームを参考にしてます。
画面上部にプレイヤーの情報、基地の資源の数などが表示されてて
画面下部には基地での状況、キャラクターの会話などの情報を表示する感じ。
どちらのウィンドウも半透明で、非表示にすることも可能だとイイかも。


こちらはゲーム初期に表示される予定の
主人公の容姿を決めるキャラクタークリエイト画面の想像図。

左側で容姿を選択して右側でプレビューが表示される、みたいな。
こう見てみるとキャラの外見を決める場面なのに文字ばかりで直感的に
キャラクターを作りづらそう。もう少し視覚的な表現を増やして
見やすくなるといいかなぁ。


ちなみにこういう設定を練るラフ的な絵の時は面白みのない固定観念を持たないように
色をつけないようにしてます。なんだか説明するのが難しいけど、ここでは
表示する情報の配置場所などが重要であって、世界観を決めるモノじゃないからね。

上の二つの図では思いつく限りの要素を描いたつもりですが
今後はたくさん設定を詰め込むのではなく、遊ぶ側が見やすくて遊びやすい
画面を作っていけたらいいなーと思ってます。


それにしても以前はシミュレーションゲームって言うとノベル形式で
選択肢を選んで女の子達と仲良くなるゲームを指すと思ってたのですが
少し違うみたいですね(=ω=`;)
あれは恋愛シミュレーションと呼ばれてたり、どちらかで言うと
アドベンチャーゲームとして分類されてるみたい。
アドベンチャーはアドベンチャーでバイオハザードみたいなの想像するけどね。

拍手


AS3横スクロールアクションゲーム制作60

Flashゲーム制作記録の第60弾目です。

新たな種類のブロック(足場)を追加しました。
その名も『HP(SP)ブースター』

HPやSPは今まで消費アイテムなしではなかなか回復出来ませんでしたが
このブロックの上に立っているだけで徐々に回復できるようになります。
いくら使用しても特にデメリットは無いので、見つけ次第満タンまで回復しよう。
これによりゲームの難易度が下がるのと、SPの無駄遣いが可能となるのが嬉しいところ。
SPブースターの上ならSP消費の大きいビーンズガンの試し打ちが可能となりましたね。

主にボス線前などに主人公が使うモノですが、上の画像のように
チームメイトが乗った場合も回復できます。
ただし、敵が乗った場合にも回復するというオマケ機能つき。


ブースターを実装した事により以下の点も追加修正行いました。
  • HP、SP回復のエフェクトを変更(赤丸→水色十字、青丸→黄色十字)
  • 敵にも「最大HP」、「最大SP」、「残りSP」の概念を追加
エフェクトを変更した理由は、回復時に赤色を使用すると毒っぽく見えてしまうからです。

拍手


AS3横スクロールアクションゲーム制作59

Flashアクションゲーム制作ボル59。
新たな武器を追加したのでご紹介します。

名前は『大型近接武器』です。ちなみに
2作目のフォーチュン・ヒルで登場した近接武器の「板っきれ」は中型にあたります。

中型と比べて特徴を書いてみますと
・リーチが長い
・モーションが大きく、隙も大きい
・威力が高い
・ガード行動がとれない(両手を使うため)
です。

固いレンガ製ブロックも技によっては一撃で破壊できるパワフルさ。
しかしながら動きがモッサリしてるので慣れが必要かも。

このゲームではどんな時でもShiftキーでガードが可能でしたが
この武器ではShiftを押してもガードモーションをとりません。
よって、現段階では回避ステップもできません。
この武器を装備してる時にShiftを押すと別のモーションを取るように
したいですが、まだ思案中です(´ω`人)
何がいいかな。

拍手


ウサギはアイスバーを手に入れた!

漢方で少しずつアトピーが治ってきたのでFlashゲーム制作を再開しました。

そんでもって新作では新たな武器として『アイスバー』たるものを追加します。

遠目に見ると剣に見えなくもない(´ω`;)

モーションは2作目のフォーチュン・ヒルに出て来た「板っきれ」と同じ。
ただしこちらの方がリーチが少し長く、威力が低い。
隠しステータスとして氷属性がついてますが、この氷属性があることで
どんな役割を果たすのかはまだ考えていません。
氷属性でしか壊せないブロックなんかを用意したら面白いかな?

他にもドシドシ武器を追加していくのでお楽しみに!
新モーションの武器もあるよ。

拍手


AS3横スクロールアクションゲーム制作58

Flashのアクションゲームを製作中。3作目を目指して進行中。
2作目では武器はビーンズガン(青のハンドガン)と板っきれだけでしたが
3作目ではもう少し多めに出したいところ。そこで今日はハンドガン関係を進めました。


・テスト版でしか登場しなかった3点バーストの赤いハンドガンの実用化。
 主人公の使用モーションは既存の青のハンドガンとほぼ同じ
・手ぶれの角度は±8度だったのですが±6度に変更。
 これにより今までより正確な射撃が可能となりました

たくさん撃つとすぐにSP切れになる仕様は変えていないのですが
別の方法で銃を使いやすくする予定です。考えているモノとしては
・立っているだけで無限にSPが回復し続ける床の実装
・SPの最大値を増やすアイテムの実装
のどちらかを取る予定です。


他にも近接武器をもっと増やしたいですね。
モーションは使い回しじゃなく、新しい動きを追加したいところ(´ω`人)

拍手


次回作の予定

次回作の3作目のゲームをぼんやり考えてみたので
決まった所を書いていこうかと思います。

※あくまでぼんやりなので、今後予定は変更がある場合も。

・次回作も2作目と同じ2D横スクロールアクション
・1作目はこおなご、2作目はコピィが登場したけど3作目はブルートが登場
・1作目は海、2作目は山が舞台だったけど3作目は空(天空の廃墟をイメージ中) 
・2人以上のチームメイトが連れて行けるようになる
・ダメージ判定のあるブロック(床)の実装。主人公だけでなく
 チームメイトや敵にもダメージを与える
・敵の動的配置を活用したいところ。つまりスイッチを押すなどの
 特定の条件を満たすと敵が出現する
・アイテム『召喚石』の実用化。この頃で既に召喚石は実装できてるんだけど
 実際にゲーム内で使えるように調整が必要
・『ごほうびシール』のセーブデータを削除できるように(※既に実装済み)



本当は同時進行でRPGっぽいゲームも作りたいけど
両方作るとなるとお得意のやるやる詐欺になりかねないので
案を考えるだけでお預け状態になるかな(´ω`;)

拍手


今後のゲーム制作の予定

今後のゲーム制作の予定を考えていきます。

Unityもいじってみましたが、せっかくAS3に慣れてるので
やっぱり次もFlashとAS3でゲームを作っていこうと思っています。
Unityは気が向いた時に触る程度になるかな?
OSをアップデートしていくといつかはAdobeFlashが
正常に動作しなくなると思うけど、それまでは大丈夫だろね。

次回作の内容は全く持って未定。
そもそも1作目、2作目のようなアクションゲームになるかどうか
それすら未定です。いつかターン制のRPGっぽいのとか
作ってみたいんですよね。作り方がイマイチわからないけど
タワーディフェンスでも面白そう。

1作目ではこおなご、2作目ではコピィキャットが主な
パートナーとして登場したので、そのうちブルート
主なパートナーとして登場させたい所ですね。

現在は2作目のフォーチュン・ヒルを元に不具合の修正や
テンプレートの追加を行っている所です。
新機能追加や、アイテムなどの既存機能の追加も行う予定。

拍手