プログラミングを上達させる開発のコツ

今回は私自身がゲーム開発をする際に心がけていることをいくつか紹介したいと思います。

以前「ゲームをきちんと完成させる方法」という記事を書きましたが今回はそれの補足というか、私なりのプログラミングが上達する開発の仕方を紹介します。

その1 習得目標を決めておく

毎回ゲームを作る際に新しく習得したい技術を決めておきます。

私自身も素人開発者なのでゲーム開発で知らないことは山ほどあるわけです。そんな状態で試行錯誤しながらゲームを作っていくわけなので毎回なにかしらの目標を作っておいた方が良いです。

ゲーム開発の的を絞るとどこに注力するのかわかるのでうまく集中できますし、出来たときに達成感もあってとても良いです。

その2 目的が達成したら適度に完成させる

目標をもってゲームの開発を始めたのなら、目的を達成できた時点で適度に完成させてしまいましょう。

深追いは厳禁です。こだわりも厳禁です。目標が達成出来たら適度に見切りをつけてうまくまとめて完成させればいいんです。

こだわりや完成度なんてのは本気で作品としてお客さんから金を取るレベルのものをリリースする時までいらないと思います。

個人的には経験こそが最大の上達方法だと思っているので、完成度にこだわるよりはさっさと次の制作に取り掛かって経験を積んだ方が良いと思います。

ただ、完成度に関しても目標の持ち方だと思うので「ある部分だけ市販ゲーム級のものをつくる」って決めて開発するというのはアリです。

その3 プログラミングに近道はない

これだけちょっと違う感じだけど、書きたいので書いておきます。

一人でコツコツゲームを作ってきて感じたことは

「プログラミングの上達は繋がっている」ってこと。

何かが分かるようになると次の何かが分かり始めるというか、いままで理解できなかったことが、あることを理解できるようになると分かるようになる、っといった感覚があります。

全部繋がっているというか、一つ一つ順番に理解していかないといけない。途中を飛ばして先に進むということが出来ないんだろうと思います。

だからそういうことも踏まえて適切な目標設定をして一つひとつ乗り越えていくのが良いんじゃなかろうかと思います。

まとめ

偉そうに書いてますが私も素人開発者です(*´ω`)。毎回、壁にぶち当たりながらその度に試行錯誤して乗り越えてます。

やっぱりプログラミングは上達に時間がかかります。だけれども上達を感じられる楽しさもあります。やる気と根性があれば確実に上達できるはずです。

と私は自分に言い聞かせる(´∀`)

enchant.jsで簡単にゲームが作れるテンプレート公開!!

enchantjs講座

今日は自分の作ったテンプレートを公開してみようかと思います(*´ω`)

このテンプレートではenchant.jsですぐにゲーム開発が始められるくらいに必要最低限の機能は入れてあります。初心者でもこのテンプレートと一冊enchant.jsの本を買ってくれば何とかゲームつくれるんじゃないかと思います(*´ω`)

しかし、プログラムの記事を書いといて言うのもなんですが、やっぱり他人に自分のプログラムを見せるのは恥ずかしい(*ノωノ)しかもテンプレートなんて裸を見られているにも等しい行為(*´Д`)ハァハァ・・

で、ここからダウンロードできます(サクッと進める)→ダウンロード

(なんか試しに自分でダウンロードするとマカフィーが危険とか言ってくるんですけど(;´・ω・)。自分で作って上げたのに危険て言われる悲しさよ(´;ω;`)

使い方と内容の説明

ダウンロードして解凍してフォルダ内にあるindex.htmlを実行するとブラウザが開いてゲームが起動します。

テンプレートなのでゲームとしての中身はないですが、一応プレイヤーキャラを操作できるようにだけはしておきました。

このテンプレートの特徴としては

  • タイトル画面、ゲーム画面、ポーズ画面、ゲームオーバー画面の切り替え
  • 時間のカウントダウン
  • 音の再生
  • ツイート機能

最低限ゲームらしく見える機能はあると思うので、あとは何かしらゲーム要素を付け加えれば立派なゲームになってくれると思います(*´ω`)

あと、音に関してですが、私はネットで見つけた無料で使える音源を使わせてもらってるのですが、それを一緒に配布することは出来ないので、プログラム内の音関係のところはすべてコメントアウトしてあります(そうしないとエラーになるので)。なので音を鳴らしたい場合はご自身で音源を用意してコメントアウトを解除してください(‘ω’)ノ

プログラム

一応プログラムの一部を載せときます。こんな感じになっとります。

あとがき

ゲーム作ったことないけど作ってみたいと思っている方はぜひ一度試してみてください(‘ω’)ノ

あと、enchant.jsの良い点を一つ上げるとしたら軽いことです。サクッと作ってサクッと実行してサクッと公開できます(自分のサイトがあればだけど)。まぁ他の環境で作ったことないんだけど(;´∀`)(でもunityのゲームってなかなか始まらなくてちょっとイライラしない?)

まぁそんなさっくり作れる感じなので他の環境でブイブイ言わしてる方も軽い気持ちでやってみたりして欲しいです(*´ω`)

enchant.jsで簡単な紙芝居風ストーリーシーンを作って遊ぼう!

enchantjs講座

今回は私が使っている紙芝居風ストーリーシーンのプログラムを紹介しちゃいます(*´ω`)

これは私のおバカゲームに必ずあるアホなオープニングやエンディングに使われる紙芝居風のシーンのプログラムです。リンク張っておくので一度ゲームを遊んでください↓

一枚の静止画を切り替えていくだけで大した機能もないですが、一応効果音やBGMも絵の切り替えに合わせて入れられるようになってます。

うまく使えば音付きのマンガみたいな感じにもできたりすると思うので挑戦してみてください

プログラムはこんな感じ

簡単に説明するよ

このプログラムは画面にタッチするたびにstory_data配列の内容を読み込んで画面に表示してます。

story_data配列のimageは画像、messageはメッセージ、seは効果音、bgmはBGMです。それぞれ必要な時だけ記述する。

メッセージで使えるのは全角のみ。半角スラッシュを改行文字にしてます。

そんだけ。あとはプログラムを読んで理解してくれ(^^;)

あとがき

画像が切り替わるだけのショボいプログラムですがうまく使えば結構楽しめると思います。

うまく改造すればサウンドノベルゲームなんかも作れると思います、たぶん。作ったことないから知らんけど(^^;)

enchant.jsのGroupクラスはとっても便利

enchantjs講座

enchant.jsでゲームを作っていて気付いたのがGroupクラスの便利さ。

実は最初は使い方が分からずあんまり使っていなかったんですが、何度か使っているうちに「そう使うものだったのか!」という発見がありました(;´∀`)

というわけで私なりに気づいたGroupの使い方を説明したいと思います。

Groupは親になる

まずGroupとは何かって話ですが、簡単に言うと要素の親になります。スプライトを画面に表示する際にaddChild()を使っていますが、綴りの通り子をくっつけているわけです。つまりルートシーンにaddChildするとルートシーンが親になります。

で、Groupを使うときはGroupにaddChildします。そうすることでGroupが親になります。

ちょっと何言ってるかわからない、ってなってるかもしれませんがenchant.jsではaddChildされた要素は親要素に対して座標を持ちます。つまりシーンにaddChildされるとシーンに、GroupにaddChildされるとGroupに対しての座標になります。

Groupの座標を変えるだけで済む

enchant.jsではスプライトなどが持つ座標は画面に対しての絶対座標ではなく、相対座標になっています。つまり、

親が動けば子も動く

ということです。例えばこんな感じのメッセージボックスを表示させたい場合

Groupを使ってこのメッセージボックスを作ると後で表示位置を変えたくなった時にGroupの座標を変えるだけで済みます。Groupの座標を変えるだけで子の要素も移動します。なぜなら子の要素は親の座標を基準にした座標になるからです。

さらに便利なことはGroupを拡大・縮小すると子要素も同じくそうなります。

あとがき

ちょっと親子関係について説明が下手で内容が伝わっていないんじゃないかと不安です(-_-;)

一応、親子関係でいうとGroupの親はシーンでシーンの親は画面になります。つまりシーンすら画面に対しての座標を持つので動かせます。

Groupを上手く使えば大きなキャラだって自由自在に動かせる!?はずです(^^;)

enchant.jsのクラスの作り方

enchantjs講座

enchant.jsにはクラスのようなものを作れる機能があります。実は私も正確にクラスというものがどういうものかは知らないんですが「役割をまとめたもの」という風に理解して使っています。

クラスの作り方

書き方としては以下のようになります。

まずクラスを記述して、newで生成するって感じです。これでクラスとして扱うことができます。

後はこの中にメンバやメソッドなどを書いていきます。

メソッドは以下のように書きます

各メソッドの間にはカンマが入ります。

 

使い方が決まってるメソッド

メソッドの中には使われ方が決まっているものもあります。

・initialize・・クラスをnewで生成したときに自動で行われる初期化処理です。初期値を設定しておきたいときなどに使います。もちろん後で呼び出して使うこともできます

・onenterframe・・フレームごとに行う処理を書きます。フレーム毎に勝手に処理してくれます。便利ですが個人的にはあまり使っていません。私はフレーム毎の処理はすべてメインループに書いています。その方が自分の考えた順番で処理させることができるし後で読み返したときに流れが分かるためです。ただし、基本的に流れに関係ないようなものはここに書くこともあります。(たぶんこれはSpriteなどにだけあるようです。なのでSpriteを継承しないとないみたい)

継承っていう機能

クラスには継承っていう別のクラスの機能を引き継いで新しいクラスを作る機能があります。たぶん最初はSpriteを継承してプレイヤークラスを作ったりすると思います。その際の書き方は以下のようになります

これでSpriteクラスを持った新しいクラスを作ることができます。もちろん自作のクラスも継承できます(enchant.Spriteの部分を自作クラスに変える)。

さらに、継承して作ったクラスを継承してまた新しいクラスをつくることもできます。継承を上手く利用するとプログラムを記述する量を格段に減らすことができます。ただし、それにはプログラムを再利用しやすいように考えて書く必要があるので初心者には難しいんですよね。。(;´Д`)まぁそういうこともできるって頭の片隅に入れておきましょう。

enchant.jsでメッセージの表示をしてみる

enchantjs講座

今回はenchant.jsでのメッセージの表示のさせ方を紹介します。

enchant.jsではLabelというクラスを使って文字を表示できるんですが、実はちょっとした問題があって、自動で改行させると文字が大きい場合重なってしまいます(訂正:どうやらこれは私の勘違いだったらしい(^^;))。

なのでその問題も解決しつつ、RPGやアドベンチャーゲームとかである「1文字ずつ表示しつつ画面押したら一括表示する」やつを作ってみました。

↑こんなやつ。GIFのフレームレートが低かったので数文字ごとに出ているように見えますがプログラムはちゃんと1文字ずつ表示します。

今回のプログラムでは画面のどこでも好きな場所にメッセージを表示できるように作りました。うまくやれば吹き出しのようにして出すこともできるかもね(‘ω’)ノ

使い方・内容説明

今回はGroupを継承してクラスを作りました。で、クラスを作る際に文字の大きさと文字を表示する場所の幅と高さを指定します。それをもとに計算して一行に表示する文字の数と行数を出してます。

このプログラムでは文字の大きさと表示域の幅から計算された文字数で改行を行います。それと「/(半角スラッシュ)」を改行文字として扱っています。表示したい文字列の改行したい部分に入れてください。

あと、全角専用です。半角文字を使うと文字の幅が違うので一行の長さに差が出てしまうので全角文字だけ使用してください。

プログラムの内容としてはjavascriptのsubstr()メソッドを使って一文字ずつ取得して、一行の限界文字数またはスラッシュで改行し、表示行の最大数まで来たら画面クリックを促す▶を点滅表示させます。クリックされたら表示に使っていた変数たちを初期化して続きを表示させます。

printメソッドをメインループの内に書き込むと動きます。

あとがき

うん、まぁやりたいことはできたなって感じかな(^^;)がんばればもうちょっときれいに書けるかなぁ。。

それにまだ実際にゲーム内で使ってないんだよね。とりあえず作ってみただけって言うね( ̄∇ ̄;)ハッハッハ

出来る方はお好きに改造して使ってくだされ(‘ω’)ノ

enchant.jsでのシーンの切り替えについて

enchantjs講座

ゲームではメインのゲームを遊ぶ部分以外にもタイトル画面やポーズ画面など、いくつかの違う画面を表示する必要があります。

enchant.jsではそれらの画面のことをシーンといい、それぞれのシーンを必要に応じて切り替えて表示することができます。

シーンの切り替えにはreplaceSceneとpushScene &  popSceneがあります

replaceSceneについて

replaceSceneはrootSceneの内容を指定されたシーンに書き換えます。なのでタイトル画面→メインゲーム→エンディングなど完全に違うシーンに移るときなどに使用します。

シーンは切替可能ということで独立したクラスとして作成できます。Sceneクラスを継承して各シーンのクラスを作成します。

上記のような感じにクラスを作るとクラスが生成された時点でroorSceneがこのシーンの内容に切り替わり表示されるようになります。

pushScene & popSceneについて

pushSceneとpopSceneは画面を一時的に切り替えたいときに使えます。

pushSceneはrootSceneの上に新しいシーンをのせるような感じになります。背景を指定しなければ下にrootSceneの内容がそのまま表示されます。ただし、rootSceneから切り替わっているのでrootSceneの動きは止まっています。

popSceneをするとrootSceneの上にあったシーンが消えてrootSceneに戻ります。

つまり一時的にしか画面の切り替えが必要のない、もしくはrootSceneの上に出したいシーン(ポーズ画面、会話イベントシーン)などに使うのに向いています。

シーンの切り替え時には要素の削除を忘れずに

画面の切り替えをして前のシーンが画面上消えてもシーンで使った要素が残っています。これはたぶんHTML5ゲームの特徴で、プログラムの変数とは関係なくHTMLの要素として記録されているので、別にHTMLの要素を消す必要があるようです。

この関数を使って忘れずに削除しておきましょう。

残り時間をカウントダウンする【enchant.js】

enchantjs講座

ゲームに制限時間を設けたいときに使えるクラスを作ってみました。

画面に文字を表示させるのでLabelクラスを継承して作っています。

プログラム

使うときは引数に分と秒をして使います。

残り時間が0になるとisTimeUpフラグがtrueになります。

簡単な説明

tickがフレームごとに加算されてそれが設定されているfps以上になると1秒としています。

他のやり方を検索で調べてみると除算を使ってやってるやり方ばかりだったので除算を使わないやり方をつくりました。enchant.jsではスマホで高FPSを出すのは難しいので除算はできるだけ避けたいと個人的に思ってます(実際どれくらい違うのかは知らんけどね(;´∀`))

あと、この方法だと正確に1秒を計れません(^^;)実際に計ってみると1分で2~3秒ずれてました。FPSがいつも確実に1秒に設定した数字になっているとは限らないので仕方ないことなんですけどね(;´∀`)

ゲームをきちんと完成させる方法

ゲームを開発しようと意気込んで始めたものの開発の難しさに気づき、漠然として広大な完成イメージに全く近づくことができずに諦めてしまう。。。っていうことが世間のあちらこちらで起きていると思われます。

正直、ゲーム作りって完成させることが難しい。特に今まで何かを作るっていう経験をしたことがない人間には夢だけが広がり過ぎてて、現実を知った瞬間に一気に心が折れてしまうというのは当然の現象だと思う。

料理で考えてみよう

料理したことありますか?なに作れますか?

スマートな方ならもうすでに私の言いたいことは理解していると思いますが、まともに料理したことない人間がうまい飯なんて作れねーんだよ!!カーッ(゚Д゚≡゚д゚)、ペッ

おっと、ちょっと本心が漏れてしまいましたがそういうことです(`・ω・´)

出来ないんですよ。出来ないっていうことを知る。

そう、みんな出来ないところから始まるんです。そして少しずつ出来るようになっていく。そういうもんだということを知ることがまず大事です。

最初にクリア条件を作る

さて、いざゲーム開発を始めたらゲームのクリア条件を先に作ってしまいます。「走ってゴールまで行く」でもいいし「敵を全滅させる」でもいいし「アイテムを全部取る」なんかでもいい、とにかく最初にクリアの条件を決めておきます。そしてステージクリア(ゲームクリア)のシーンを作ってしまいます。

おわかりいただけますでしょうか?

これでゲームは完成してるんですよ(`・ω・´)

「敵を全滅させる」が条件ならとりあえず敵を1匹画面に出しといてそいつを倒せばクリアになります。完成です。感動です(´;ω;`)

 

…えぇ、言いたいことはわかります。

しかし、これで夢半ばで開発がとん挫しようともゲームは完成させられます。

 

個人的な話ですが私ははっきりしたゲームの内容を決めずなんとなく作り始め、結果、目的のわからないクリアも出来ない謎の未完の大作(?)をいくつも作ってしまいました。それらを試作と思えるならいいですが、ゲームとして完成させたいと思って開発していると心がやられます(;´Д`)

作りたいゲームのイメージはしっかり作る

結局作りたいものが何かはっきりしているのか?っていうことが一番大事です。クリア条件を先に作るのもそのためです。

「俺はマリオやロックマンを超えるすごいアクションゲームを作る!!」

みたいな壮大だけどぼやけたイメージだと完成しないです。

「マリオみたいなゲーム作りたいから、手始めにゴールまで走るゲーム作ってみよう!!」

最初はこれくらいでいいです。そしてこの内容でできる限りはっきりとしたイメージを作ります。「まっすぐの道だけどたまにウ〇コとか落ちててジャンプで避けながら進む」みたいな感じでね(そんなゲームどっかにあったなぁ。。)

まとめ

偉そうに書きましたが半分は自分への戒めです(^^;)

ただ、本当にイメージは大事だと思います。強くはっきりイメージがあればあるほど自分の望んだものが出来上がる可能性は確実に高くなります。

ゲームに限らず、料理でも絵でも音楽でもファッションでも人生でもイメージが大事です。はっきりしたイメージであればあるほど達成できる可能性が上がります。

人生はイメージ

そんな言葉をどっかで聞いたような。。

 

秘密警察ギャボリン第1話

今回は「秘密警察ギャボリン第1話」の紹介です。ギャボリンは私が考えたおっさんヒーローです。全然カッコ良くないし、強そうでもない。。だけどなんだかとても愛らしい。そんなおっさんヒーローのアホな物語の記念すべき第一回目です

ギャボリンとは?

ギャボリンは正義の味方である。しかし、その正体は誰も知らない。唯一わかっていることは「おっさん」だということ。

ギャボリンに変身すると強いらしい。具体的にはわからないがとにかく強い、ということになっている。

ギャボリンのヒーロースーツには秘密がいっぱい隠されている。見た目が毎回違うのはどうやらヒーロースーツの影響らしいぞ(大ウソ)

「体は子供、頭脳はアレ」などっかのマンガの主人公みたいに事件に遭遇するらしい。そのたびに熱い心のギャボリンは戦いにでる。

「男とはそういうものさ・・」と彼の背中は語っている。。

ゲームのあらすじ

平和な生活を送る市民のお茶の間の主役であるテレビの電波が突然ジャックされた!!

謎のテロリストによる「爆弾を仕掛けた」宣言

突然の恐怖にパニックとなった東京を救うべく一人の男が立ち上がる!

 行け!ギャボリン!

ギャボリンの孤独な闘いが今はじまる!!パパラパラー(テーマソング的な何か)

ゲームの遊び方

テロリストが仕掛けた時限装置を破壊することが目的です。時限装置の周りには防衛装置が配備されており近づくことが出来なくなっています。なので動いている防衛装置の合間を狙って時限装置を撃破しましょう!!

ゲームは全部で39ステージあります。最後の数ステージの難易度はけっこう高いので頑張ってください。確実に当てられるタイミングがあるのでそれを見つけてください。

39ステージクリアすると感動のエンディングが待っています!!

制作のはなし

このゲームは開発初期に作ったタイミング射的をベースにしています。

ゲームの基本部分はタイミング射的のものをそのまま使っています。なのでこれも「えぴそーど0」のときと同様イベントシーンと音を付け加えて完成させました。

タイミング射的に関しては影響を受けたゲームがあります。

このcore ballのようなシンプルで面白いゲームができないだろうか?と考えて作ったものがタイミング射的でした。

実際タイミング射的自体もシンプルで、個人的にはこれだけでもアプリとして開発すれば売れるんじゃね?と思いました。ただ、これはステージを作るのが結構大変で。。(;´・ω・)それで途中で放置してたんです(^^;)

それでえぴそーど0を作ったあと、これもストーリーを加えて復活させてやろう!、ということになりました。

プログラムに関して

プログラム的に苦労した点としては、各ステージの玉の動きをどう扱うか?っていうところだったかと思います。単純に連想配列を使ってパターンを管理するようにしましたがこの辺のデータの扱い方については勉強が必要だと思いました。

その後のゲームの開発でも経験してわかってきたことなんですが、こういったデータの設計や管理がゲーム制作では重要になってくるようです。

作った感想

タイミング射的は自分の作ったゲームの中では一番よくできているゲームだと思っています。それをベースにして作ったこのゲームは間違いなく今の時点の私の最高傑作だと思います。

ついでに言うとイベントシーンの絵も無駄に力が入っていて、特にエンディング部分は結構時間をかけて丁寧に書きました。そういった面でも愛着のあるゲームです