スプライト作成1-スプライト

「Scratch」で創作プログラミングをはじめよう!

いつも「みなラボ」にアクセスいただいてありがとうございます!(´∀`*)ノシ

↑みなラボのページに「いいね!」はコチラから↑(>∀<)ノ☆ 


今回はPC上で簡単に動く「Scratch(スクラッチ)」というアプリケーションで、自作ゲームを創作してみました。

↓(動画)こんな感じのなんちゃってシューティングゲームが出来上がりました!

ブロックを組み合わせることによって比較的簡単にプログラミングでき、足りないキャラや物は付属のペイントツールで描くことができます。

「Scratch」とアイデアさえあれば、すぐにでもプログラミングが始められます。

このアプリケーションの特長は、ブロックを使って比較的簡単にプログラミングできることなのですが、基本的な考え方は本格的なプログラミング言語のC言語などと同じなんです。

ですので、スクラッチで作ったプログラムを、マイコンや本格的なゲームへ翻訳・適用することもできますし、なによりスクラッチで学んだ経験をそのまま他のプログラミング言語を習得する為の基礎とすることもできます。

それではScratchのインストール方法から説明したいと思います。

 

スポンサーリンク

1.Scratchの説明

1-1.Scratchインストール方法

 

Scratch公式サイト(@MIT)

スクラッチダウンロード2

上のページから自分のPCに対応したソフトをダウンロードします。

「Download」のテキストをクリックするとダウンロードが始まります。

 

1-2.各ウインドウの役割

ウインドウ全体説明2

 
あかワク:
⇒動きを表示する画面

みどりワク:
⇒スプライト(キャラや物)を選択する画面

あおワク:
⇒スクリプト(プログラム)を記述する画面。その他、コスチューム、音も編集できます。

 
あかワク内の緑の旗マークをクリックすると、スクリプトが実行されます。

その右の赤い丸をクリックすると、スクリプトが停止します。

 
その他、Scratchの基本的な使い方は↓こちらの記事にまとめてます!!

Scratchプログラミング入門1「スプライトをクリックしてHelloさせよう♪」
http://share-lab.net/scratch1

scratch1-topvew

 

スポンサーリンク

2.ゲームの作り方(Scratchプログラミングのしかた)

※1と2は、紙と鉛筆で書いてみて下さい。スケッチ程度の絵にしてみたり矢印などを入れて関係性を視覚的に書き込んでみるとプログラミングしやすくなります。

1.やりたい事を書き出す。

2.目に見えるキャラや物それぞれの動きを書き出す。

——————————————————–

3.目に見えるキャラや物(スプライト)をつくる。絵を書く。

4.それぞれの動きをつくる(スクリプトを記述する)。

5.全体で動くように調整する。

6.完成!

今回は作り方の1、2を省いてしまったので、手書きのものはありませんが、完成したものを使って説明していきたいと思います。

 

スポンサーリンク

3.ゲームの作り方(今回のScratchプログラミング例)

※1と2は、紙と鉛筆で書いてみて下さい。今回は後付で描いてますが、プログラミング前に、スケッチ程度の絵にしてみたり、矢印などを入れて関係性を視覚的に書き込んでみるとプログラミングしやすくなります。

 

3-1.やりたい事を書き出す。

まずは絵にしてみる。

プログラム下書き

やりたい事
 シューテイングゲームを作りたい。できれば横スクロール。

必要なキャラや物
 主人公
 敵
 弾丸
 スコア表示
 クリア表示

が必要。

 

3-2.キャラや物それぞれの動きを書き出す。

難しそうなので、横スクロールはあきらめた。

主人公
 上下左右に動ける。弾を発射できる。


 自動で動く。弾があたるとリアクションする。 

弾丸
 主人公から発射される。直線的に飛んでいく。

スコア表示
 敵に弾が当たったら、加算される。

クリア表示
 1000点でゲームクリアにする。表示を出して、ゲームを終わる。

 

3-3.目に見えるキャラや物(スプライト)をつくる。

付属のペイントツールでそれぞれ描いていきます。

3-3-1.スプライト(主人公)「Sprite1」

※下の絵をクリックするとポップアップで少し拡大されます。

スプライト作成1-スプライト

このキャラは最初から登録されているキャラです。

今回は主人公として使用します。

今回は使いませんが、コスチュームが二つ用意されているので、二つのコスチュームを交互に表示させれば、歩く動作を表現することも可能です。

 

3-3-2.弾丸「Sprite2」

スプライト作成2-弾丸

描画ツールの「●」で赤い丸を描きました。

 

3-3-3.敵(被弾時の絵も描く)「Sprite3」

スプライト作成3-敵1(通常時)

あまり絵のセンスが無いので、棒人間を描いて、それを敵ということにしました。

スプライト作成3-敵2(ダメージ時)

コチューム2として、敵がのけぞっている様子を描いて、弾丸が当たった時にはこちらの絵が表示されるようにします。

 

3-3-4.スコア表示「Sprite4」

スプライト作成4-スコア

描画ツールの「T」ボタンを押すとテキストエデイターが使えるので、スコア表示窓の左側に表示する為に「Score」と記述します。

 

3-3-5.ゲームクリア表示「Sprite5」

スプライト作成5-ゲームクリア

こちらも先ほどと同じくテキストエデイターを使って、「Game Clear!!」と記述しました。

 

3-4.プログラミング手法(文法)の説明

個々のスクリプトの説明の前に、今回使ったプログラミングの手法(文法)を説明します。

今回のスクリプトでは、

 無限ループ
 IF文
 フラグ

という三つのプログラミング手法を使って、記述しています。

それぞれ説明していきます。

 

3-4-1.無限ループとは、

文字通り『無限に繰り返す』という意味で、マイコンなどを使ったコントローラでも使われており、電源ONの時にいつでもプログラムが動ごきだせるようにしておくという事を指します。

一度の行動で終了してしまうのではなく、電源ONの時は何度も作動して欲しい場合は、この『無限ループ』を使います。

状況に応じて動きを変化させたい場合には、この『無限ループ』を使って、センシングした情報に応じた作動パターンをその都度判断できるようにプログラミングしておくと、実現できると思います。

クルマの電子制御の大多数はこの方法でプログラミングされており、様々な判断を行って、様々な動きを可能にしています。

話が少し脱線しましたが、要するにこの『無限ループ』している間はプログラムが走っていると考えて下さい。

プログラムの動きとしては、上の行から下の行まで処理して、一番下の行まで行ったら、無限ループ内の一番上の行に戻るという動きを繰り返します。

余談ですが、産業機械など、一から順番にタスクをこなしていくようなものには、この『無限ループ』を使用せず、順番に動きを制御する『逐次制御』が用いられるものもあります。

『無限ループ』をScratch上で記述する方法は下の図のようになります。

スクリプト作成1-無限ループwaku

「ずっと」の逆コの字型のブロックに挟まれたブロックを『無限ループ』させる事ができます。

 

3-4-2.IF文とは、

プログラムの判断文の中でも基本的なものになります。

もし○○だったら●●する。
もし○○でなかったら▲▲する。

という判断文です。

Scratch上での記述のしかたは下の図のようになります。

スクリプト作成2-IF文waku

「もし○○だったら」の条件文に対して、肯定した時はすぐ下のブロックに進みます。

否定した時は少しとばして、「でなければ」の下のブロックへ進みます。

今回の例の赤枠内を日本語で書くと、
(※swOnはデータを記憶するデータBOXと考えて下さい。)

もし「swOnという名前のデータBOXの中身が1」ならば、「sprite2のクローンを作る」

その後、「swOnという名前のデータBOXに0を代入する。」

もし「swOnという名前のデータBOXの中身が1」でなければ、何もしない。

ということになります。

 

3-4-3.フラグとは、

英語でフラグといえば旗のことですよね。

プログラム上では、対応した旗が上がっているか下がっているかで現在の状態を判断する場合があります。

この『旗』のことをフラグといいます。

プログラム上では、実物の旗は使えませんので、任意の名前を付けたデータBOXに数値を代入し、旗と同じ役割をさせます。

1を代入する=フラグを立てる(旗を上げる)

0を代入する=フラグを下げる(旗を下げる※フラグクリアとも言う。)

といいます。

旗(フラグ)を上げ下げしてプログラムの状態を保存・認識させます。

Scratch上での記述のしかたは下の図のようになります。

スクリプト作成3-フラグwaku

使用する際には、任意のタイミングでフラグを立てて、その状態の時に処理したい内容を、先ほど説明したIF文の判断文の中に記述します。

『1か?0か?』を判断して、フラグが立っている場合の処理、フラグが下がっている場合の処理をそれぞれ記述します。

この時、フラグが立っている場合の処理が終わった直後に、フラグを下げる記述をしないと、無限ループでプログラムしている場合、フラグクリアされることなく毎回その処理を実行してしまうことになるので、フラグがうまく機能しなくなってしまいます。

ですので、フラグが立っている場合の処理が終わったあとには、フラグを下げる記述を忘れないようにしましょう!

(フラグクリアを別の場所で行ったほうが良い場合もあると思いますので、その時は別の場所へ記載してください)

 

3-5.それぞれの動きをつくる。(スクリプトの記述)

まず想定している動きを思い出してみましょう!

主人公
 上下左右に動ける。弾を発射できる。


 自動で動く。弾があたるとリアクションする。 

弾丸
 主人公から発射される。直線的に飛んでいく。

スコア表示
 敵に弾が当たったら、加算される。

クリア表示
 1000点でゲームクリアにする。表示を出して、ゲームを終わる。

でしたね。

それぞれこの動きを実現できるように、スクリプトを記述していきます。

Scratchではキャラや物(Sprite)それぞれに対して、スクリプトを記述していくことになります。

 

3-5-1.スプライト(主人公)「Sprite1」

目標の動き
 上下左右に動ける。弾を発射できる。

スペースキーで弾丸の発射、矢印キーで上下左右に動くようにしたいと思います。

スクリプトタブの各ブロックの色と対応する見出し(動き、見た目、音、、、、、、)に、ブロックがありますので、下の例と同じようにブロックを組み立ててみて下さい。

※下の絵をクリックするとポップアップで少し拡大されます。

スクリプト作成11-スプライト

データの部分は、自分で変数を作られければいけないので、「変数をつくる」ボタンを押して、例と同じように作ってみて下さい。

「下向き矢印キーが押されたら」の部分から下が切れてしまっていますが、上向き矢印の場合と同じ法則で書いてみると動きますので、それぞれ記述してみて下さい。

スプライト左右に動かすにはx座標を増減させることで実現できます。

<スクリプトを少し説明すると>
1.緑の旗をクリックしてスタート

2.すぐに無限ループに入ります。

3.それぞれのキーが押されたら、所定の動きをします。

4.スペースキーを押すと、弾丸のクローンができます。

5.矢印キーを押すと、その方向に動きます。

キーを押すくらいIF文を使わなくても実現できるんじゃないかと思うかもしれませんが、無限ループの中に、●●キーを押されたら▲▲すると記述すると、●●キーを押している間、ずっと連続で何度も▲▲してしまいます。

ですので、上の例ではキーを押して、離した瞬間に一度だけプログラムを実行させるように、IF文で記述しています。

 

3-5-2.弾丸「Sprite2」

目標の動き
 主人公から発射される。直線的に飛んでいく。

「Sprite1」と同じように、スクリプトタブからブロックを選んで記述してみて下さい。

スクリプト作成12-弾丸

ちょっと変則ですが、プログラムを動かすときは例のスクリプト画面右下に無造作に置かれている「隠す」ブロックをあらかじめクリックして、ゲームスタート時は非表示の状態にしておいて下さい。

<スクリプトを少し説明すると>
1.クローンされたらスタート

2.座標を主人公「Sprite1」に変更する。

3.表示させる。

4.ずっと直線的に画面右方向へ進んでいく。

 

3-5-3.敵(被弾時の絵も描く)「Sprite3」

目標の動き
 自動で動く。弾があたるとリアクションする。

例の絵を参考にスクリプトタブからブロックを選んで記述してみて下さい。

スクリプト作成13-敵

<スクリプトを少し説明すると>
1.緑の旗をクリックしてスタート

2.「tokutenn」というデータBOX内を0にする。

3.「tokutenn」というデータBOXを表示させる。

4.無限ループさせる。

5.乱数に応じた数値で、自動で動く。

6.弾丸「Sprite2」に触れると、コスチューム2(被弾時の絵)に変更し、「tokutenn」を+10する。

7.弾丸が通り過ぎるとコスチューム1(通常時の絵)に変更する。

8.「tokutenn」が1000点以上になると、コスチューム2(被弾時の絵)に変更する。

 

3-5-4.スコア表示「Sprite4」

目標の動き
 敵に弾が当たったら、加算される。

スクリプトとしては、「Sprite3」で得点が加算される記述がされているので、ここでは何も書かなくてOKです。

ただし、スコアの表示を整える必要があります。

下の絵のように、変数の部分を表示させて「tokutenn」の左側にチェックをつけます。

すると、動きを表示させる左上のウインドウに表示されるので、それを左クリックし「large readout」を選ぶと、例と同じ表示をさせることができます。

その表示の左側に「Score」のスプライト「Sprite4」を持っていけば完成です。

スクリプト作成14-スコア

 

3-5-5.ゲームクリア表示「Sprite5」

目標の動き
 1000点でゲームクリアにする。表示を出して、ゲームを終わる。

例の絵を参考にスクリプトタブからブロックを選んで記述してみて下さい。

スクリプト作成15-ゲームクリア

<スクリプトを少し説明すると>
1.緑の旗をクリックしてスタート

2.表示を隠す。

3.無限ループさせる。

4.「tokutenn」が1000点以上になると、表示させ、すべてを止める。

 

4.全体で動くように調整する。

上の動画のように、緑の旗マークをクリックする。

敵が動き出す。

主人公が上下左右キーで上下左右に動く。

スペースを押すと、弾丸が発射される。

弾丸が敵に当たると、当たっている間は敵はダメージ時のスプライトになる。

同時に、スコアがプラスされる。

スコアが1000点を超えると、「ゲームクリア」を表示される。

 
 
このように思惑どおりに動くか、一つづつ確認していく。

動かない場合は、スクリプトの記述が間違っていないか一つづつ見ていきましょう!

フラグの名前は間違ってないか、IF文の記述場所は間違ってないか、などなど・・

 
 
この確認作業を「デバックする」というのですが、この時に心構えとして自分が思っていることを書いておきます。

 
 
プログラムは書いた通りに動いている⇒

・ほとんどの場合、ソフトが悪いのではなく、自分の記述のしかたが間違っている。

・一方でソフト特有の癖みたいなものもあるので、ソフトの再起動などを試すことも有効。

 
 
プログラムの動きは速い⇒

・細かく想像してみると意図していないタイミングで動作している場合がある。

・自分がプログラムを高速で実行するCPUになったつもりで、プログラムを見てみる。

『プログラムは一行最速50ns程度で動く場合もある!』
※50ns=0.00000005秒

 

5.すべて確認し思惑どおり動けば完成です!

アプリケーション内での動作なので、スクリプトの記述が少し間違っていても、パソコンが壊れる心配はありません。

マイコンカーなどの場合は暴走して周囲にぶつかってしまって、破損してしまうこともあるかもしれませんが、このScratchの場合はそうゆうこともありません。

リスクは少なくても、マイコンなどにC言語で記述する時のような、プログラムの文法を使って記述できるので、とても実践的なプログラミングを学習できます。

文字(アルファベット)ではなく、ブロックでプログラミングできるので、細かなスペルミスでプログラムが動かないということも少ないのではないかと思います。

慣れは必要ですが、少しのアイデアで自分オリジナルのプログラムの創作も可能かと思います。

初めてのプログラミングに最適なScratchを使って、あなたも創作プログラミングの世界を楽しんでみてはいかがでしょうか?

 
↓Scratchオンラインコミュニティーにその他様々なScratchプログラムを公開してますので、ぜひ覗いてみてくださいね♪
https://scratch.mit.edu/users/share-lab/

 
「横シューテイングアクション」はこちら↓
https://scratch.mit.edu/projects/120069121/

 

その他スクラッチプログラミング記事一覧

 
Scratchプログラミング入門1「スプライトをクリックしてHelloさせよう♪」
http://share-lab.net/scratch1

scratch1-topvew

 
Scratchプログラミング入門2「スペースキーを押してHelloさせよう♪」
http://share-lab.net/scratch2

sc-spe-1

 
Scratchプログラミング初級1「スプライトをクリックして歩かせよう♪」
http://share-lab.net/scratch3

sp-rmove-pp

 
Scratchプログラミング初級2「モノにぶつかった時にハロー!させよう♪」
http://share-lab.net/scratch4

scratch4-topv

 

オススメの書籍

「楽天」

 
「Amazon」

小学生からはじめるわくわくプログラミング2

 
小学生からはじめるわくわくプログラミング

 
5才からはじめる すくすくプログラミング

 
Scratchではじめよう!プログラミング入門

 
ゲームで遊ぶな、ゲームを作ろう!スクラッチ2.0アイデアブック―ゼロから学ぶスクラッチプログラミング

 

おすすめのオンラインスクール

 
『TECH ACADEMY オンラインブートキャンプ』

 
TECH ACADEMY オンラインブートキャンプとは、

Webアプリケーションスキル(Ruby on Rails)、PHP、WordPressなどのWeb開発周辺スキル習得のコースを中心に、iPhoneアプリ、Androidアプリ、Unityなどのオリジナルアプリ開発コースや、WebデザインやWebマネジメント、さらにはWindows Excelのスキルを習得できるコースもラインナップされている、プログラミングをこれから始めてみようと思っている方から、エンジニアを目指している方までの幅広い方々にとって非常に心強い『プログラミング系オンラインスクール』です。

 
直接、Scratchのプログラミングとは関係ありませんが、プログラミングスキルを向上させていきたいと考えた時、コードを使ったプログラミング習得の最初の一歩としては、「Webサイトをプログラミングをしてみる」のが一番良いと思います。

 
Webサイトのプログラミングは、基本的にインターネット環境とPCがあれば学習可能なので、プログラミング学習環境をスムーズに整えることができると思います。(別途、レンタルサーバーなどが準備できると尚良い。)

色々な機材は一切不要で、シンプルな構成で学習できます。

 
そして、Webサイトのプログラミングの場合、インターネットを介してサーバーに格納されたWebサイトをプログラミングするので、プログラミング結果をブラウザを介して、すぐにその場で、PC上で確認することができます。

トライ&エラーしながら、結果を一個づつ確認できるので、一歩づつ確実にプログラミングスキルを積み上げていくことができると思います。

 

 
 
 
 
 

っと、ちょっと気になるなぁと思ったそこのあなた!!

もっと詳しく内容を知りたいと思ったら、、、

 
↑『TECH ACADEMY』公式サイト上部のメニューバーに表示されている、『無料説明会』から無料説明会動画を見ることが出来ますよぉ!^^

 
受講希望のコースを選択し、

メールアドレス(GmailでもOK!^^)かSNSアカウントを入力すると、希望コースの無料説明会動画を見ることができます。

 
受講申し込みを検討する際に気になる、「受講終了時点の成果目標」「習得できるスキル」「具体的な学習方法」などの解説と、短期間で高い学習目標に到達することが可能となる裏付けについて、丁寧に説明されています。

『無料説明会』のページには、カリキュラムの詳細も紹介されています。

その他『説明会動画特典』として、受講料が割引になる特典も準備されてるようですよ♪^^

 

 
 
 
 
 

気になるんだけど、少し試してみないと分からないよなぁ~なんて思ってるあなたには、、、

 
『一週間のブートキャンプ無料体験』もありますよっ♪

 

 
ぜひ体験してみて下さいね♪(*^▽^*)

 
 
 
 
 

 
ランキングに参加しています!

もしこの記事を気に入っていただけたなら、↓クリックで応援していただけると、とても嬉しいです! (∩´∀`)∩

どうぞ、よろしくお願いいたします!m(_ _)m


にほんブログ村

 
↓こちらもお願いしますっ!m(_ _)m


人気ブログランキングへ
 

この記事を読んでいる人はこちらの記事も読んでいます。(※広告も含む。)

 

 

最後までお読みいただいて、ありがとうございます。

もしこの記事を気に入っていただけたなら、SNSで共有していただけると、とても嬉しいです!どうぞ、よろしくお願いいたします!m(_ _)m

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitterで『みなラボ』をフォローしよう!

Feedly、RSS、Push7はこちら!!

follow us in feedly

まだデータがありません。

まだデータがありません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です