忍者ブログ

幻日記

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

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が勝手にダウンロードされてしまう仕様に変更されていたようです。

拍手


おなら吾郎

シュールな大人向けアニメ『おなら吾郎』より、おなら吾郎さんを描きました。
 
配色に気をつけてオシャレな感じを目指しました。
いつも通り左右反転をかなり多様してますが
おじさん(吾郎さん?)の顔は微妙に左右非対称だったりします。

↓没バージョンがこちら。先に出来上がったのはこちらだったのですが、色の調整が難しいのでやめました。

そしておなら吾郎さん本人に送ったところ、嬉しい事にお返事をいただきました。おならのキャラクターという先入観とは裏腹に
とっても真面目で礼儀正しい方ですΣ(°ω°;)

おはなしはツッコミ不在の「なんで!?」という理解不能な展開の連続ですが
意外にも物語の本筋は王道に則ったものが多く『不良少年の更生』や
『幼馴染の異性との恋愛問題』などの少年少女の葛藤を描いたものがメインだと思いました。

そんでもって私としては主人公のおなら吾郎だけでなく出し主(?)のおじさんが
特に気に入ってます。終始無表情で無言だけど、いつも主人公のおなら吾郎に付き添う姿が
少し愛らしい。ところでこの2人、一体どっちが本体なのだろうか?やっぱりおじさんの方?


以前から谷口崇さんのアニメをYoutubeで見てとても気に入っていたのですが
テレビアニメのシリーズものとして放送されているのを
初めて知った時はすごく嬉しかったです。

現在テレビとYoutubeで全10話まで公開されてますが、個人的に一番好きなのがこれ。

絵描き歌で一番言ってはいけないであろう言葉『こういう形を描きましょう』……。
そしてこどもたちの「だれだよこれ〜!」のツッコミ(とても貴重)。

あとこのシリーズに限らず谷口さんのアニメ全般で言える事ですが
アゴを1ミリも動かさずに唇だけを動かして喋る手法がたまりません。

拍手


ゲーム制作時のデータ管理にオススメ「Googleスプレッドシート」

趣味でゲーム制作をされてる方だと登場キャラクターのプロフィールの管理を
している方もいませんか?そこで便利なのが「Googleスプレッドシート」。
Googleアカウントが必要なのですがとても便利なので個人的にはオススメです。
(ちなみにGoogleアカウントは作成無料でYoutubeへの動画やコメントの投稿もできます)

ゲーム制作とは関係ないですが、実際にGoogleスプレッドシートで表を作ったのがこれ。使用感はまんまOfficeのエクセルなんですが、データはネット上に保存されるので
別のパソコンや別のOSで簡単にデータをやりとり出来ちゃいます。そんでもって
他人と共同で表を編集していくことも可能なようです。

Googleスプレッドシートの他にGoogleドキュメントというのもあり、こちらは
Officeでいうワードにあたります。こちらもゲーム制作でのメモ帳代わりに使えます。

「Google教信者か」とか「Googleの回し者か」と思われてしまいそうな
記事になっちゃいましたが(=ω=`;) 以上であります。

拍手


コメント機能 復帰

このブログでのコメント機能を復帰させました。

残念ながら忍者サーバー(※このブログを扱ってるサーバー)ではコメントの通知機能が不安定で
どなたかのコメントが書き込まれたとしても通知されないことが多々あったので
代わりに今までは拍手コメントを利用していました。

けど、本来拍手コメントはブログ閲覧者さん方から管理人へ一方的に
メッセージを残す機能なので相互的にやり取りをしたい場合は極めて不便でした。
そこで仕方なしにコメント機能を復帰させました。

ちなみに過去の記事もコメントが書き込める状態に戻りました。
今後私にメッセージを下さる方は拍手ボタンかコメント欄かお好きな方を選びくださいませ。

コメント入力欄はブログトップから記事を閲覧してる場合は表示されませんので
記事のタイトル(この記事であれば『コメント機能 復帰』と書かれている部分)をタップすると
記事ページに飛びますので、そこから入力可能でござります。

拍手


メイソンジャーデビュー

メイソンジャーを買ったよ。


それと前の記事でアメブロに引っ越しすることを考えてましたが結局断念しました。
実際にアメブロに引っ越し作業を終えて使い心地を探ってみたのですが、イマイチ
自分には合いませんでした(=ω=`;)

忍者ブログと比べて残念な点は……
・大きくて不要な要素の多いヘッダー&フッターがある
・記事編集機能が非効率的(記事の一括編集に手間がかかる)
・ブログの閉鎖が不可能(一応、アメーバを退会すればブログは消せる)
・『続きを見る』などの折りたたみ機能が公式機能として存在しない
というところがありました。テレビ好きな方や芸能人好きな方
そしてブログやパソコン初心者の方向けなんだなぁと感じました。

かと言ってこの忍者ブログに満足している訳でもないので
また良さそうな場所を探してみるのも面白いかもしれないね。

拍手


5FDP - 朝日のあたる家

最近非常に気に入ってる曲があります。House of rising sun。歌っているのはFive finger death punch。
アメリカに古くからあるフォークソングで、日本では
『朝日のあたる家』と名付けられているそうです。

一番の魅力は歌詞。著作権の問題でこのブログでは歌詞が載せられないのですが
とても切ないメッセージが込められています。

そういえばアメーバブログってブログに歌詞を載せられるそうですね。
忍者ブログからアメーバブログに引っ越しするのもアリかも……。

拍手



るいず

※今回載せてる内容は後から手直しするかもしれません
以前から設定を練ってたゲーム用の子を描き起こしてみました。

前に紹介したスイレンのお友達。
 
・赤目+泣きぼくろ
・黒髪ロングストレート
・常にマスクをつけてる
・日本刀が武器(スイレンから譲り受けたモノ)
・口が悪くて少し粗暴な感じ
・名前はエロイーズ(略称はルイズ)

マジメちゃんなスイレンとは対照的に、こちらはヤンキー気質っぽいそうです。

拍手



IKアニメ勉強中

twitterで呟いてたのですがIllustratorでキャラクターを描いて
Flashのボーンツールを使うというIKアニメを作成中です。
Flashゲームでキャラクターのアニメーション描写は出てきたけど
ボーンツールとか全然使ってなかったんだよね。

最近ハマってるFlashゲームのStrike Force Heroes3を参考にしてます。

拍手