39:フローチャートを理解しよう

◆PROCESSINGで始めるゲーム作りとコンピュータ

Monster_1 39:フローチャートを理解しよう

今日の話題

 

15:構造化プログラミング

前回までで、画像や効果音などリバーシゲームに必要な素材を全て読み込みました。

ようやく最初の準備が整ったというわけですね。ケンジくんも、徐々にゲームを作りたくなってきたようですよ。

ヨウコ
ゲームに必要な素材が全て読み込めたわね。

ケンジ
よし、じゃぁさっそくゲームの本体を作ろう!。

ヨウコ
はやる気持ちはわかるけど、本格的にゲームを作る前に、ゲームの全体像について考えておきましょう。

ケンジ
全体像?。

ヨウコ
そうよ。特にケンジくんのような初心者は、支離滅裂なプログラムになることが多いから、全体像を事前に考えておくことが大切ね。

ケンジ
ぶー。ひどい言われようだなぁ。

ヨウコ
(笑)。でも正直な話、リバーシゲームを作るぞって言っても、どこから取りかかればいいのかわからないんじゃない?。

ケンジ
うっ、それはそうですけど・・・。

ヨウコ
そんな時は、プログラムが持つ機能や処理の流れを洗い出して、それらを組み合わせながら全体を作り上げる方法がいいわ。

ユカ
具体的には、どういう事なんですか?。

ヨウコ
そうね。例えば豆を挽いてコーヒーを入れる時の「作業」を考えてみましょう。

(画像URL:illust-AC 様:唐神 さん、acworks さん、かえるWORKS さん)

ヨウコ
コーヒーを入れる作業は、上記のような4つの作業(a,b,c,d)に分けられるわね。

ケンジ
うん。

ヨウコ
この他のやり方もあるけど、これらの作業は上から下に向かって順番に進められていくのがわかるかしら?。

ユカ
そうですね。

ヨウコ
そして、aからdの各作業はさらに細かな作業(a-1,a-2,c-1,c-2)に分けることができるわ。

(画像URL:illust-AC 様:唐神 さん、acworks さん、かえるWORKS さん)

ヨウコ
このように、やりたい仕事を機能に分解して、それらをどのような順番で行えば目的を実現できるのかを考えるの。

ヨウコ
このような方法を「構造化」と言うのよ。そしてこの手法を取り入れてプログラムを作る事を「構造化プログラミング」と呼ぶの。

ユカ
いわれてみれば単純なんですね。
ヨウコ
そうね。

ヨウコ
今回は最初だし、私がリバーシゲームの構造を書き出しておいたから、見てちょうだい。


ケンジ
こんな風に図にすると、なんだかわかりやすいや。

ユカ
図を書く理由はわかりましたが、これをプログラムにどう活かすんですか?

ヨウコ
先程の図を、よりプログラムの構造に近い形で書き表すのよ。

ヨウコ
プログラムの構造を書き表した図を「フローチャート」って呼ぶんだけど、せっかくだから少し書き方を覚えておきましょうか?。

.
プロの世界では、プログラムを書く前にフローチャートを作る事があります。

すこしITを勉強したことがある方は「うは、めんどくさい・・・」と思ったでしょうか?(笑)。

慣れてくると、フローチャートを書かなくても構造化されたプログラムが作れるようになります。でも、初心者の方はフローチャートを書く練習をした方が良いでしょう。

急がば回れ。めんどくさい気持ちはわかりますが(笑)、私の経験的にも、フローチャートを書いて構造化プログラミングに慣れる事は、プログラミング上達の近道になると思います。

 

16:SPDの書き方を覚えよう

フローチャートには様々なものがありますが、今回は「SPD(Structured Programming Diagram)」を使いたいと思います。

先程プロの現場ではフローチャートを作る事があると書きましたが、実は標準的なフローチャートを作ることはほとんどありません。

各メーカーごとにフローチャートを改良した様々なチャート(これを「構造化チャート」と呼びます)を使うのが一般的です。

以下に、代表的な構造化チャートの一例を掲載しておきます。
今回SPDを使うのは、これがエクセルで一番書きやすかったからです。他意はありませんので、念のため(笑)。

ヨウコ
まず最初に、先ほど説明した構造をフローチャートで書いたものを示すわね。


ケンジ
いろんな記号が書かれていますね。

ヨウコ
これはSPDと呼ばれるフローチャートなんだけど、覚えるべき記号は数種類しかないのよ。
ヨウコ
一番大切なことは記号にこだわることじゃなくて、プログラムの構造を分かりやすく書き出す事だから、そこは忘れないでね。

ヨウコ
まずは順次処理の書き方を説明するわね。

ユカ
順番に行いたい事を、横に線を引き出して書いていくんですね。

ヨウコ
次は繰り返し処理の書き方よ。

ケンジ
この処理だと、月曜から金曜の平日は毎日会社に行く事を繰り返すんですね。

ユカ
繰り返しが終わったら・・・つまり休みになったらループを抜けて、犬を散歩につれていくのね。

ヨウコ
分岐処理は次のように書くわよ。


ケンジ
分岐条件の答えがYESかNOかに応じて、処理の流れが変わるんだね。

ユカ
ケンジの場合は、学校をサボルっていう分岐しかないんじゃない?。

ケンジ
よ、余計なお世話だい。

ヨウコ
最後は関数の記述の仕方ね。

ユカ
こうして見てみると、意外とシンプルなんですね。

ヨウコ
そうよ。SPDは標準的なフローチャートを簡単に、かつより構造化を意識して書けるように改良されているの。

ケンジ
これなら、割と簡単に書けるかもしれないね。

.
どうだったでしょうか?。

フローチャートと聞くと初心者の方は身構えてしまうかもしれませんが、書き方そのものは、決して難しいものではありません。

今回はたまたまSPDを取り上げましたが、SPDに限らず「構造化チャート」のどれでも良いので書き方を覚えておくと、プログラムの構造を書き出すのに役立ちます。

構造化チャートによっては、詳しい解説書が売られているものもありますので、興味がある方は探してみると良いかもしれません。

※上記で説明したSPDの書き方は、私の方で若干改変を加えてあります。正式な書き方とは異なる事をお断りしておきます。

 

17:ゲームの全体像を理解しよう

ヨウコ
書き方がわかった所で、今回のリバーシゲームのSPDを改めて見てみましょうか。最初の部分は、こうね。


ケンジ
処理が始まったら、いきなり「ゲームの準備を行う」関数を呼び出しているや。

ヨウコ
そうね。PROCESSINGは、どんな処理から始まるんだったかしら?。

ユカ
あ、setup()関数!。だからいきなりsetup()関数を呼び出すフローが書かれているんですね。

ヨウコ
正解。これはPROCESSINGの特徴的な処理ね。

ユカ
あ、もしかして前回取り組んだリソースデータの読み込みは、最初に呼び出される「いろいろな準備処理」になるんですね?。

ヨウコ
その通り!。

ヨウコ
じゃぁ、その次の処理はどうなっているかしら?。

ケンジ
その次は・・・画面表示を繰り返す処理になっています。

ヨウコ
そうよ。PROCESSINGではsetup()関数が終わったら、draw()関数が繰り返し呼び出されたでしょ?。だから、画面表示を繰り返すのよ。

ユカ
繰り返しの終了条件が書かれていませんが、このループはずっと繰り返すんですか?。

ヨウコ
そうよ。PROCESSINGでは特に指定しない限りdraw()関数はずっと繰り返し呼び出されるの。こういうのを無限ループと呼ぶんだったわね。

ヨウコ
画面表示を行った後は、何をしているかしら?。

ユカ
GAME OVERになったか判定しています。そして、GAME OVERだったら「GAMEOVER画面表示」を行っていますね。


ケンジ
GAME OVERじゃない時は、どうなるんだろう?。

ヨウコ
フローチャートをよく見て。GAMEOVER検査でGAMEOVERじゃない時は、どうなっているかしら?

ケンジ
そうか、普通に画面を表示する処理だけを繰り返すんだ!。

ヨウコ
正解よ。これが今回のリバーシゲームの大きな流れになるわ。

.
リバーシゲームの全体の流れが理解できたでしょうか?。

ゲームには、この他にもマウス入力やキーボード入力時の処理があります。それらについては、必要に応じて解説をしていきたいと思います。

次回からは、今回作成したSPDに必要な処理を加筆しながら説明をしていきます。

SPDは、いうなれば冒険の地図です。そして今回、冒険の地図の全体像がはじめて明らかにされたわけです(笑)。

ゲームの流れがわからなくなったら、いつでもSPDをながめて「迷子にならない」ようにしてくださいね。

※上記会話に登場する素敵な人物画像は、次のサイト様の画像を利用させて頂いております。ありがとうございます。

画像URL:とりのすみか

 

Forest今日の言葉

・フローチャート

記号を用いて、プログラムの構造を書き表した図です。プログラムがもつ機能や処理の流れを把握するのに役立ちます。

ちなみに今回のリバーシゲームを標準的なフローチャートで書くと以下のようになります。

標準的なフローチャートの書き方については、様々なサイト様で詳しく解説されています。興味のある方は参照してみると良いかもしれません。

 

・構造化チャート

標準的なフローチャートを、各ITメーカーが改善したもの。標準的なフローチャートに比べて、シンプルでかつ構造を表しやすい図となっています。

 

scroll今日の文法

・なし

 

 今日のまとめ

  • プログラムを作る前にフローチャートを作成する
  • フローチャートには様々なものがあるが構造化チャートがオススメ
  • 構造化チャートの書き方は、けっして難しくはない

40:ゲームの初期化をしよう へ進む
38:音楽ファイルを読み込もう に戻る
目次へ戻る


本ページで利用している特に参照元記載のないアイコン画像は、下記サイト様より拝借しております。各画像の著作権は、それぞれのサイト様および作者にあります。