実行画面の構造を知ろう

想定時間：10分

今回の内容

• 実行画面は入力したプログラムの実行結果が表示されるところ
• 実行画面は何層も重なってできている
• 消したいものに応じて「消すボタン」を使い分ける

実行画面の構成

実行画面は、プログラムの実行結果を表示する場所です。

実行ボタンを押すと、エディターに書いたプログラムを実行して、その結果が表示されます。

一見すると、実行画面はただの黒い背景の枠に見えますが、実は少し複雑な構造をしています。

実行画面の構造

上記の図の通り、実行画面は3つの層が重なってできています。その層それぞれに表示された実行結果が重なって表示されることで、ひとつの「実行画面」が成立します。

🗒️覚えよう

実行画面は3つの層が重なってできている

実行画面の3つの層

実行画面を構成する3つの層について、上から順番に見ていきましょう。

テキスト画面

• 文字や数字・記号が表示される層
• 一番手前に表示される

一番上の層は「テキスト画面」です。

文字や数字・記号はこの層（画面）に表示されます。テキストが一番手前に表示され、下で説明するスプライトや図形はテキストの下に表示されます。

もっと詳しく知りたい場合は、プログラマーズガイドの テキスト画面 のページも参照してください。

スプライト画面

• スプライトが表示される層
• グラフィックより手前に、テキストより後ろに表示される

真ん中の層は「スプライト画面」です。

スプライトはこの層（画面）に表示されます。テキストよりは下に、図形よりは上に表示されます。

スプライトは、あらかじめ用意されたキャラクターを簡単に動かせる便利な機能です

※ 詳しくは別のチュートリアルで学習します

グラフィック画面

• 図形・背景が表示される層
• 一番後ろに表示される

一番下の層が「グラフィック画面」です。

図形や背景はこの層（画面）に表示されます。一番後ろに表示されるため、スプライトや文字は図形の上に重なります。

もっと詳しく知りたい場合は、プログラマーズガイドの グラフィック画面 のページも参照してください。

表示順はテキスト＞スプライト＞グラフィック

層は上からテキスト・スプライト・グラフィックの順に重なっています。

今、自分が見ている画面を一番手前とすると、手前から順にテキスト・スプライト・グラフィックです。

すべてを同時に表示させた場合、一番手前に表示されるのはテキスト、その次にスプライト、最後にグラフィックになります。

実際にすべての画面に要素を表示させた例

「タコ」という文字（テキスト画面）が一番手前に表示され、一番上にいるタコのスプライトの顔を隠すように表示されます。

タコのスプライト（スプライト画面）は文字よりも下に表示されますが、青い四角の上に表示されています。

青い四角の図形（グラフィック画面）は文字やスプライトよりも表示順が下で、背景のように見えます。

実行画面の情報を消したいとき

実行画面は、層（画面）ごとに情報を消すことができます。

※ ただし、スプライト画面とグラフィック画面は別々に消すことができず、同時に消すことになります。

層（画面）ごとに情報を消したいときは、実行画面下の「消す」ボタンを使い分けると便利です。

図形を消すボタン

図形を消すボタンは、スプライト画面とグラフィック画面の2つの画面に表示されているものを消します。テキスト画面に表示されているものだけが残ります。

図形を消すボタンを押した状態

文字を消すボタン

文字を消すボタンは、テキスト画面に表示されているものだけを消します。スプライト画面とグラフィック画面に表示されているものは残ります。

文字を消すボタンを押した状態

cls 命令について

cls 命令を使うことでも、実行画面の情報を消すことができます。

1行目に cls 命令が入っていると、何度も確認するとき、前回の結果がすべて消されたうえで新しく実行結果が表示されます。

前回の結果を消さないまま新しい実行結果を表示すると、前回の結果に新しい結果が重なって確認がしづらいです。

下のアニメーションは、1回実行した後、「タコ」の文字の位置を変更してもう1回実行ボタンを押したときの比較です。

cls 命令がないと…「タコ」の文字が2個あるように見える

cls 命令があると…前の結果が消えてきちんと確認できる

cls 命令の後に数字を指定することで、特定の画面のみ情報を消すこともできます。

• cls : 実行画面の情報をすべて消す（3層とも消える）
• cls 1 : テキスト画面の情報を消す（文字を消すボタンと同じ働き）
• cls 2 : グラフィック画面とスプライト画面の情報を消す（図形を消すボタンと同じ働き）
• cls 3 : 実行画面の情報をすべて消す（3層とも消える）

cls 命令を使って、確認作業をやりやすくしましょう。

今回のおさらい

• 実行画面は3つの層が重なってできている