【Scratchで簡単なゲーム作成編⑤】ゲームの状態を伝えるセリフ枠を作成する

2020/09/23

【Scratchで簡単なゲーム作成編④】条件を満たすとアイテムの種類を変化する機能をつける

【Scratchで簡単なゲーム作成編⑥】クローンの使い方を工夫して、スプライトのプログラミングを効率化してみる

スクラッチでの文字表示としては、デフォルトで

〇〇と言う

と

〇〇と考える

の２つが簡単に利用できます。

一方でロールプレイングゲームなどのような枠の中に文字が表示されるようにしたい場合には、フォントなどを準備したり、文字の表示位置を適切に処理したりと、ちょっとした工夫が必要になります。

というわけで、今回はオリジナルのセリフ枠をゲーム内に入れる方法をためしてみます。

ちなみに今回の完成品プログラムは

こちら

です。また、以下でデモプログラムを貼り付けておりますので動かしてみてください。

【Pスクール厳選】Scratchを学べるオンライン＆駅前プログラミングスクール５選

フォントコスチュームの準備

自作のフォントを準備しても良いのですが、ひらがな、カタカナ、数字、記号...などなどフォントとして登録して使いたい文字があればあるほど、手間がかかってしまいます。

今回は既に基本的な日本語のフォントをコスチュームのセットにして公開していただいているプロジェクトから、該当のスプライトだけを抜き取って自分のプロジェクトで扱えるようにするやり方が

こちらのサイト

で紹介されています。

まずはフォントセット付きのスプライトの移植方法をやっていきます。

先程のサイトで紹介されているやり方では、

こちらの方のプロジェクト

の中にあるスプライトを利用させていただいているようです。

プロジェクトのリミックスから余計な要素を除去

それでは、

2014あけおめ by inosyan

というプロジェクトの中身を見ていきます。

まずは

[中を見る]

をクリックし、プロジェクトの中に入ります。

もじ

スプライトがあるのでこの上で右クリックすると、

[書き出し]

が出てくるのでこれをクリックします。

この書き出しボタンを押すと、

もじ.sprite3

というスプライトファイルが保存できるのでこれをパソコンのどこかに置いておきます。

スプライトの書き出し・読み込み

新しいプロジェクトを作成し、スプライトの編集画面から

[スプライトをアップロード]

をクリックし、先程保存した

もじ.sprite3

を選択します。

これで文字のスプライトがコピーされました。

ただ、これだけだと余計なプログラムやスプライトが混じっているため、要らないものをきれいに消していきます。

スクリプトブロックを全部消して空にし、使われていた変数もリストも削除、また文字のコスチュームも赤色と白色の2通りが用意されているので白文字をすべて消して赤文字だけに統一します。

要らないものを消したら再度

書き出し

して、

もじ.sprite3

ファイルに上書きしたら完成です。

これでどのプロジェクトにでも文字のスプライトがご自分のパソコンのフォルダから読み込んで利用できるようになりました。

また、もっと文字を追加したいときや、色を変えたいときなど、コスチュームを編集することで新しく文字を利用することができるようになりますが、フォントセットは画像の詰め合わせですので、あまり増やしすぎても容量が大きく、動作が重くなってしまうので取り扱いには注意です。

文字スプライトは必要最低限の文字コスチュームだけを入れるようにしたほうが良いでしょう。

【Pスクール厳選】Scratchをしっかり学ぶためのオススメ書籍まとめ

セリフ枠の実装

さて、ここからは本題のセリフを表示する枠の機能を実装する手順の話に戻ります。

以前の記事・

スプライト・クローンの基本的な利用方法

では、クローンの位置を少しづつずらしながら、コスチュームを変えていくためのプログラミングを解説縞ましたが、クローンによる文字表示はこれとやっていることは同じです。

早速文字を表示するプログラミングを行っていきましょう。

編集前のプロジェクトは

ここ

にあります。前回、

Scratchで簡単なゲーム作成編④ | 条件を満たすとアイテムの種類を変化する機能をつける

で作成したプロジェクトの続き作業にあたります。

【Scratchで簡単なゲーム作成編④】条件を満たすとアイテムの種類を変化する機能をつける

今回はScratchゲームで、条件の設定からアイテムの種類を変化させる方法を深堀してみましょう。

セリフ枠の準備

まずは材料の準備からです。

スプライトを新たに2つ、先程作成した

もじ

スプライトと、

セリフわく

スプライトを作成します。

セリフわく

スプライトには文字を表示するため、適当な枠の画像を作成しておきます。コスチュームも

セリフわく

という名前で1つ登録しておきます。

またここで変数

セリフ

と

おしらせちゅう

の2つの(グローバル)変数を追加しておきましょう。

先に

セリフわく

のスクリプトブロックから作成します。

最初にゲームがスタートした時点では

セリフわく

が出ないように隠しておきます。

ここでは２つのメッセージイベントを作成します。

おしらせ

イベントのブロックで、セリフ枠の表示開始からの処理をさせています。

また、

おしらせおわり

イベントでセリフ枠を閉じる際の処理を行います。

特に難しいプログラムではありませんが、

おしらせ

イベントメッセージは不特定多数のスクリプトから送られて来られるのを想定して、

おしらせ

の数だけ変数

おしらせちゅう

をカウントアップさせております。

どこかのスクリプトで

おしらせちゅう

のカウントが消費(-1)されると、どこかの時点で

おしらせちゅう

がゼロ(=つまりはセリフを閉じる状態)になるのを待って、

おしらせおわり

メッセージを送り出します。

おしらせおわり

イベントを受け取ると、

セリフわく

が隠れるような処理を行っています。

文字を変えてクローンする

次に

もじ

スプライトにセリフ枠に文字を並べるスクリプトを作成していきます。

これは

以前の記事で説明したテクニック

と同じですので、そちらも参考にしてください。

セリフ枠に

セリフ

に入った文字を表示開始させる

おしらせ

イベントメッセージを受け取ると、

セリフ

の文字を一つ一つ読み出して、座標をずらしながら、クローンされたときに適切なスプライトを割り当てている処理を行っています。

各コスチュームの名前には

char_<文字の種類>_red

と決められているので、それに注意しながらコスチュームを変化させます。

また

おしらせおわり

イベントを受け取ると、クローンを全部消去させています。

セリフ枠の呼び出し

それでは最後にセリフを呼び出す側のスプライトに処理を挿入してみましょう。

今回のプログラムでは、

おきばしょ１

〜

おきばしょ５

がセリフの表示を行っていたので、こちらのプログラムを修正します。

一例をあげると、以下の赤色の四角部分のブロックになります。

まず

セリフ

に表示したい文字列をいれ、

おしらせ

イベントでセリフ表示の開始を他のスクリプトに知らせてから、表示したい時間だけ待機し、表示しなくても良くなったら

おしらせちゅう

のカウントを一つ減らしています。

これで、たこがエサを食べると

セリフ

に渡された文字列を表示させることができるようになりました。

余談〜クローンとスタンプの違い

拡張機能 - ペン

の中にある

スタンプ

を使えば、スプライトの画像を高速でゲーム画面に貼り付けることが出来て一見便利ですが、ちょっとした落とし穴があります。

スタンプを描画するルールでは、背景を除くレイヤーの一番後ろ、かつ、すべてのスプライトの背面に描画される、とされています。

つまり、スタンプは背景の上に追加で画像を書き込んでいるようなものですので、どうしてもスプライトより前面に絵を書くことが出来ません。

このため、画像を他のスプライトよりも前面に見えるようにしたい場合、スタンプではなくクローンを利用しなければなりません。

クローンを作成したときのルールとして他のスプライトの前面に表示されることを覚えておくと良いと思います。

【Pスクール厳選】Scratchを学べるオンライン＆駅前プログラミングスクール５選

まとめ

今回は、スクラッチの文字の吹き出しから脱却して、ワンランク上の文字列表示の方法を解説してみました。この方法は色々と面白い応用が出来たり、よりゲームの見栄えをリッチに出来たりしますので、ぜひこの機会に覚えていっても損はないと思います。

参考サイト

RPGの会話ウィンドウを実装しよう

記事を書いた人

記事の担当:taconocat

ナンデモ系エンジニア

これからの"地方格差"なきプログラミング教育とは何かを考えながら、地方密着型プログラミング学習関連テーマの記事を不定期で独自にブログ発信しています。

カテゴリー

記事のおしながき

【Pスクール厳選】Scratchを学べるオンライン＆駅前プログラミングスクール５選