【中村さんのSpringin'講座】絵本をつくってみよう① ～ページのめくり方

株式会社しくみデザイン開発のビジュアルプログラミングアプリ「Springin’（スプリンギン）」。

難しいプログラミング言語を覚えることなく、直感的な操作で”絵日記のように”取り組めるのが特長です。

この連載では、しくみデザイン代表・中村俊介（なかむら・しゅんすけ）さんが自ら「Springin'」の使い方をレクチャー！

毎回ひとつずつ機能を紹介しながら、作品作りを応援します！

（他の記事もCHECK！連載のまとめページへはこちら↓）

はじめに
ページめくりボタン
もどるボタン
子どもクリエイターの作品では……
自動ページめくり
子どもクリエイターの作品では……
世界のマーケットから
次回の連載をお楽しみに！

はじめに

Springin’では「シーン」と呼ばれる画面を増やして行き来することで、複雑なストーリー展開やゲームの1面、2面、という展開をつくり出すことができます。

これはつまり本の「ページ」みたいなものです。

ページがどんどん増やせるということは、自分の考えたお話が作り込めちゃうということ。

Springin'で扱うオブジェクトは絵が基本なので、自然と絵本になります。声も録音できるので、ストーリーを読み上げてくれたり効果音を入れたりすることも。
しかも、順番に進むだけじゃなくて分岐をいれたりできるので、一昔前に流行ったゲームブックのようなものも簡単につくれます。

ということで、今回は絵本をつくってみることにしましょう。
絵の描き方……はそれぞれ工夫していただくとして、今回は絵本を作るときに便利な「しかけ」のつくりかた講座、です！

ページめくりボタン

絵本をつくるにあたって、まず必要になるのが「ページめくり」の機能です。
つまり、ページをめくるボタンをつくってタッチしたらページを移動するようにする、ということですね。早速つくってみましょう。

まず、Springin'を立ち上げて、「つくる」画面にします。
そして、下の方にある緑色の丸い＋ボタンをタッチして新しいワークの開発画面を開きましょう。これはいつもと一緒の流れですね。

今回も、「マル」に登場してもらいましょう。
アイテムリストの＋ボタンとタッチして、新規アイテムでマルを描いてください。

もう一個、びっくりした顔のマルをつくってください。

それと、ページをめくるためのボタンが必要です。
「すすむボタン」と「もどるボタン」を作りましょう。

これでアイテムは揃いました。

それではプログラミング開始です！！
開発画面の真ん中にどーんと「マル」を置いて、右下に「すすむボタン」を置きましょう。これが１ページ目になります。

つづいて、２ページ目をつくります。
右側にある黒い箱が「シーンリスト」です。ここでシーンを追加したり削除したり並び替えたりといった操作ができるようになっています。新しいシーンを追加するのは、（＋）ボタンですよね！タッチしてみましょう。

はい、新しいシーンが増えました。
これを２ページ目にしたいので、びっくりマルを真ん中に、「もどるボタン」をマルの下に配置します。

２ページ目はこんな感じ。
一旦１ページ目に戻りましょう。開発中のシーン移動は、シーンリストをタッチするだけです。さっき作った１ページ目をタッチしてください。

いよいよ、ページ移動を実装します。
「すすむボタン」をタッチするとページがめくれるようにしたいので、「すすむボタン」にアイコンを設定します。アイコンの一覧の中に本のページをめくっているような「シーンチェンジ」のアイコンがあるんです。

ここを選択すると、移動先を指定する画面になるので、さっきつくった２ページ目のサムネイルをタッチ。すると、緑色の枠で囲まれます（選択された状態です）。そして右下のチェックマークで設定完了です。

それでは、実行してみましょう。
実行は、プレイボタンでした。

実行したら、「すすむボタン」をタッチしてみましょう。
２ページ目に移動しましたか？

無事、次のページにすすむことができるようになりました。

もしかしたら、すすむボタンをタッチした拍子にふわーっとボタンが動いてしまった人がいるかもしれません。ボタンを動かないようにするには……そう、「ピン」で止めてあげれば良かったですね。やり方忘れちゃった人は、「マルの大冒険①」を見直してみてください。

（「マルの大冒険①」はこちら↓）

もどるボタン

今度は「もどるボタン」を実装します。

「停止」ボタンをタッチして開発画面にもどって、今度は「もどるボタン」をタッチ。アイコンの中からさっきと同じ「シーンチェンジ」をタッチします。
もどるボタンを押して移動したいシーンは、１ページ目。シーン一覧のなかから１ページ目をタッチして選択、そしてチェックマークで完了してください。

はい、これで完成です！！
プレイボタンを押して、動きを見てみましょう。

あとは、ページを増やしたり、ページの移動を順番通りじゃなくて分岐を作ったりと、いろんな工夫ができますよ。

子どもクリエイターの作品では……

例えば、これはマーケットに出品されているSpringin'クリエーターの絵本ワークです。

「まこちゃんはじめてのおつかい」

分岐も上手に使って、ママから頼まれてないものを選んで買おうとするとママに怒られる展開になります。

「わくわく動物園」

動物園の中を探検するしかけ絵本。動物の説明も楽しいですよ。

「ちびっこしょうぼうし」

ちょっとしたゲームもあるしかけ絵本になっています。

自動ページめくり

見てる人にページの進行を委ねるのではなく、自動的に話が進むようにしたいときもありますよね。そんなときに、自動でシーンを切り替えるにはどうしたらよいでしょうか？

ヒントは、「指でタッチしてイベントを発生させる代わりに、アイテムがぶつかってイベントを発生させる」です。

では、さきほどの続きでやってみましょう。
開発画面の１ページ目のシーンに追加していきます。

指の代わりに「すすむボタン」をタッチする役割をしてくれる「コマル」をつくりましょう。あたらしく丸を描いてアイテムをつくってください。そしてアイテムリストからコマルを画面左下あたりに出して置いてください。サイズはちょっと小さめにしましょうか。

このコマルの役割は、「すすむボタン」を押すこと、です。
つまり、コマルが「ぶつかったらトリガーを送ってイベントを発生させる」ようにプログラミングすれば良いわけです。

まずは、コマルが動いてすすむボタンにぶつかるようにします。
画面に配置したオブジェクトは、描いたとおりの軌跡で動かすことができます。それを実装する属性がくるっと動いた矢印の「移動」アイコンです。コマルをタッチして出てきたアイコン一覧から「移動」をタッチしましょう。

すると、動きの軌跡を描く画面に切り替わりますので、そのまま動かしたいように指で線を引いてください。まずは単純に、マルからすすむボタンまでしゅーっと線を引きましょう。

こんな感じ。チェックマークをタッチして設定完了です。
そして、プレイボタンで動作確認……ですが、まだこのコマル、動きません。なぜなら、動くキッカケを与えられてないからです。

でも、キッカケをあげなくても勝手に動いて欲しいときだってありますよね。そのために「オート」属性があるのです。

停止ボタンで開発画面にもどって、再びコマルをタッチ。出てきたアイコン一覧の中から、再生マークと軌跡と音符が描かれている「オート」アイコンをタッチして緑色にしてください。

そしてもう一度プレイボタンを押して実行！
しゅしゅしゅーっと、線を引いたとおりにちっちゃいマルが動きましたか？そして「すすむボタン」にぶつかりましたか？
動いたけどぶつからなかった場合は、「移動」の線を描き直してください。

さてさて、ここで「マルの大冒険②」を思い出してください。マルがぶつかるだけではイベントは発生せずにゴールの旗は消えませんでしたよね。イベントを発生させるには「接触」属性を設定してトリガーを送る必要がありました。

そこで、コマルのアイコン一覧の中から「接触」をタッチして、ぶつかる相手に「すすむボタン」を設定します。

チェックマークをタッチして、完成。
プレイボタンで動きを確認しましょう。

自動的に２ページ目に切り替わったら成功です。
これをさらに工夫することでいろんな使い方ができます。

例えば、「移動」の線をゆっくりと描くと動きもゆっくりになるので（描く速度がそのままアイテムの動きになるのです）、自動でページが切り替わるタイミングを調整できます。
あるいは、自動で切り替わる装置を背景と同じ色のアイテムでつくると仕掛けが見えなくなります。