マルの大冒険② ~思い通りに動かそう
※ 本コンテンツにはプロモーション(PR)が含まれています。また、詳しい最新情報については公式サイトをご確認ください。
難しいプログラミング言語を覚えることなく、直感的な操作で”絵日記のように”取り組めるのが特長です。
この連載では、しくみデザイン代表・中村俊介(なかむら・しゅんすけ)さんが自ら「Springin'」の使い方をレクチャー!
毎回ひとつずつ機能を紹介しながら、作品作りを応援します!
(他の記事もCHECK!連載のまとめページへはこちら↓)
株式会社しくみデザインCEO中村俊介さんが開発したビジュアルプログラミングアプリ「Springin'」の使い方を紹介します。 コエテコはプログラミング教育がわかる、プログラミング教室・ロボット教室がみつかるポータルメディアです。
https://coeteco.jp/topics/springin >
はじめに
![](https://static.coeteco.jp/coeteco/image/upload/c_limit,f_auto,q_auto,w_1400/v1/cs-product/froala/x_QFNHWRCpf2Tjq_r8poLQ.png)
それでは、マルの大冒険のつづきをつくっていきます。
「マルの大冒険」はSpringin’の入門として最初につくるのに適していて、一通り作り上げたら使い方がわかるようになっています。
前回は、スタートしたらマルは転がっていっていくだけでした。そこで今回は、マルを操れるようにして、さらにゴールもつくりましょう。
つづきからつくりますので、「マルの大冒険①」をやってない方は、こちらをつくってから見に来てください。
「マルの大冒険①」へはこちらから↓
「Springin'(スプリンギン)」は直感的な操作で"絵日記のように"取り組めるのが特長のプログラミングツールです。この連載ではしくみデザイン代表・中村俊介氏自ら使い方をレクチャー!さっそく作品作りに取り掛かりました。
2024/11/06 10:16
ふっかつのじゅもん
前回のつづきからつくるために、保存してあるワークの再編集(複製編集)をします。Springin'を起動すると、まず「あそぶ」画面が表示されますので、下の真ん中の(+)アイコンをタッチして「つくる」画面に切り替えましょう。
「つくる」画面に並んでいるサムネイルから前回つくったワークを選んでタッチしましょう。するとワークの詳細情報が表示されます。
![](https://static.coeteco.jp/coeteco/image/upload/c_limit,f_auto,q_auto,w_1400/v1/cs-product/froala/BnXFmFNpQgJD5kXeIsvGUQ.jpg)
![](https://static.coeteco.jp/coeteco/image/upload/c_limit,f_auto,q_auto,w_1400/v1/cs-product/froala/K46QMOlcs5jpHFlGYuy2Iw.jpg)
![](https://static.coeteco.jp/coeteco/image/upload/c_limit,f_auto,q_auto,w_1400/v1/cs-product/froala/CWqf-HnRec5FpwUKOeW41Q.jpg)
下にある再生ボタンをタッチするとワークの再生が始まります。
保存されているワークは再生すると自動的に始まるようになっていますが、再生モード状態なので、編集ができません。
そこで、制作モードに切り替える必要があるわけです。
再編集をするためのモード切替は、左下にある三本線のアイコン(ハンバーガーアイコンといわれたりもします)をタッチすると出てきます。真ん中の紙と鉛筆のようなアイコンがそれです。
![](https://static.coeteco.jp/coeteco/image/upload/c_limit,f_auto,q_auto,w_1400/v1/cs-product/froala/IaE90Wo9savk_mjhhrOKmg.jpg)
![](https://static.coeteco.jp/coeteco/image/upload/c_limit,f_auto,q_auto,w_1400/v1/cs-product/froala/c328eUB3wFzRc-PijoyvpQ.jpg)
![](https://static.coeteco.jp/coeteco/image/upload/c_limit,f_auto,q_auto,w_1400/v1/cs-product/froala/_OtseY7KNUcnyqzYxTbizw.jpg)
はい、これで制作のつづきができるようになりました。
操り人形マル
前回はただただマルが転がり落ちていくのを見るだけでした。そこで今回は、マルを操れるように操作ボタンをつくっていきましょう。
新しいアイテムをつくるときは、左側の白いリスト上の(+)アイコンをタッチでしたね。
![](https://static.coeteco.jp/coeteco/image/upload/c_limit,f_auto,q_auto,w_1400/v1/cs-product/froala/ZXw1Vsh3DwEqkMSO1AaruQ.jpg)
描画ツールでジャンプボタンを描いてください。
タッチしやすいように、中を塗りつぶした絵が良いでしょう。
![](https://static.coeteco.jp/coeteco/image/upload/c_limit,f_auto,q_auto,w_1400/v1/cs-product/froala/KFnj4ekm8h8MfCUSZtTyYQ.jpg)
こんなふうに。
ジャンプボタンが描き終わったら、右下のチェックマークボタンをタッチ、でした。
出来上がったジャンプボタンを画面の右下の方に配置しましょう。
![](https://static.coeteco.jp/coeteco/image/upload/c_limit,f_auto,q_auto,w_1400/v1/cs-product/froala/gG0S-UmPVeItiTgMeTRjjA.jpg)
画面に配置しただけではまだ何の機能も持っていないので、「タッチされたらマルをジャンプさせる」ようにプログラミングします。Springin'でのプログラミングのしかたは、何かをさせたいアイテムをタッチして属性を設定していく、でしたね。
配置したジャンプボタンをタッチしましょう。
すると、いつものアイコン一覧が表示されます。この中の右上、人がジャンプしている「ジャンプ」属性アイコンをタッチ。すると、続いてジャンプさせたい相手を選ぶ画面になりますので、マルをタッチしてください。すると、ジャンプボタンとマルが線でつながります。
![](https://static.coeteco.jp/coeteco/image/upload/c_limit,f_auto,q_auto,w_1400/v1/cs-product/froala/Y5MLHFV-WY_OV40OL_vRrw.jpg)
![](https://static.coeteco.jp/coeteco/image/upload/c_limit,f_auto,q_auto,w_1400/v1/cs-product/froala/Ms0DjGicrwEHaovsVMib2A.jpg)
これで、「ジャンプボタンをタッチしたらマルがジャンプする」というようにプログラミングできたわけですが、このままだとジャンプボタンが重力で落ちてしまうので、合わせて「ピン」属性をタッチして落ちないようにピン止めします。
![](https://static.coeteco.jp/coeteco/image/upload/c_limit,f_auto,q_auto,w_1400/v1/cs-product/froala/ltV3zkjV8ydeAxQG3rRqPw.jpg)
できましたか?
それでは、実行してみましょう。
実行するのはプレイボタンでしたね。
![](https://static.coeteco.jp/coeteco/image/upload/c_limit,f_auto,q_auto,w_1400/v1/cs-product/froala/ZfWzIqkKoHT3MHJpW3gEVA.jpg)
プレイ!!
![](https://static.coeteco.jp/coeteco/image/upload/c_limit,f_auto,q_auto,w_1400/v1/cs-product/froala/NsGZ5zSCUKLuuE4rvtiIsA.gif)
ジャンプボタンをタッチしたら、ちゃんとマルがジャンプしてくれましたか?
ちなみに、床がなくてもジャンプボタンを押したらジャンプしてくれるので、連打をすると画面の上に飛んでいって戻ってこなくなってしまいます。Springin'では、画面の外に出たアイテムは消えるようになっています。
確認できたら、停止ボタンをタッチして制作モードに戻りましょう。
これで、マルが操作できるようになりました。
ゴールを目指せ
![](https://static.coeteco.jp/coeteco/image/upload/c_limit,f_auto,q_auto,w_1400/v1/cs-product/froala/uCasm7Xx_Ro-hpj2PPMTVQ.png)
ジャンプして消えてしまう人生なんで、儚すぎます。
マルに人生の目的、ゴールをつくってあげましょう。
ゴールは旗にします。
いつものように、左側の(+)ボタンから描画ツールを使ってゴールフラッグを描いてください。旗の色や形は自由にどうぞ。
![](https://static.coeteco.jp/coeteco/image/upload/c_limit,f_auto,q_auto,w_1400/v1/cs-product/froala/KVttFFyvxTNYAi0Fp54Rjw.jpg)
![](https://static.coeteco.jp/coeteco/image/upload/c_limit,f_auto,q_auto,w_1400/v1/cs-product/froala/OZZHIB2DPcRdJTphrDUtCw.jpg)
出来上がったゴールを、今度は左上の方に配置してください。
そう、転がっただけじゃたどり着けず、ジャンプしたら到達できるくらいの場所。
目的を達成しようと思ったら、寝転がってるだけじゃダメですからね。
![](https://static.coeteco.jp/coeteco/image/upload/c_limit,f_auto,q_auto,w_1400/v1/cs-product/froala/R-xQ1n5DFIlLTcqKPDuDXg.jpg)
そして、配置したゴールにプログラミングします。
マルがゴールに到達したら、ゴールが消えるようにしましょう。ゴールを手に入れて吸収するイメージです。
ゴールをタッチして出てきたアイコン一覧から、まず「ピン」設定しましょう。
ゴールが落ちてしまったら大変ですから。続いて、ゴールの能力(できること)属性の中にある「消滅」属性をタッチして設定。これで、ゴールは消える能力を手に入れました。
![](https://static.coeteco.jp/coeteco/image/upload/c_limit,f_auto,q_auto,w_1400/v1/cs-product/froala/XdeV11GBJgz4VMeNsvetLQ.jpg)
ところで、この「消える能力」はいつ発動できるのでしょうか?
そのカギを握っているのが「イベント」です。
アイテムが自分に指定されている能力を実行することを「イベントが発生する」といいます。Springin'に限らず、一般的なプログラミング言語でも、イベントが発生して記述されている内容を実行する「イベント駆動型」の手法が多くあります。
つまり、そのイベントが発生したときに、ゴールは「消滅」を実行して消えちゃうわけです。
そしてイベントを起こすためには、きっかけが必要です。いま実行してね、とちゃんと教えてあげないと、アイテムたちはいつイベントを発生させれば良いかわかりませんよね。
……ああ、なんだか難しい話になってしまった。
つまり、設定した能力を実行するにはきっかけをあげる必要があるということ。
まあとにかく、ゴールをつくった「マルの大冒険」を実行してみてください。
そして、ジャンプしてゴールにぶつかってみましょう。
![](https://static.coeteco.jp/coeteco/image/upload/c_limit,f_auto,q_auto,w_1400/v1/cs-product/froala/US4L5xenR3RdsPR2L8MAlg.gif)
ゴーーーール!……したのに、なにもおこりません。
ただマルがゴールにぶつかって跳ね返されただけです。本当はゴールが消えて欲しいんですけど……。
なぜなら、ゴールに対して誰もイベントを発生するようにきっかけをあげてないからです。
Springin'ではこのイベントを発生させるためのきっかけを「トリガー」とよんで雷のようなビリビリマークであらわしています。
そこで、「マルがゴールにぶつかったらイベントを発生させる」ようにプログラミングしてみましょう。「マルがゴールにきっかけをあたえる(ビリビリのトリガーを送る)」なので、主人公はマルです。
マルをタッチして、アイコン一覧を出してください。
この中に、2つの四角がぶつかってビリビリしてるアイコンがあります。これが、ぶつかった相手にトリガーを送りイベントを発生させる属性、です。この「接触」アイコンをタッチすると相手を選ぶ画面になるので、ゴールをタッチして線で繋いであげましょう。
![](https://static.coeteco.jp/coeteco/image/upload/c_limit,f_auto,q_auto,w_1400/v1/cs-product/froala/tTKHSBVnZADyzjFs9nFtOw.jpg)
![](https://static.coeteco.jp/coeteco/image/upload/c_limit,f_auto,q_auto,w_1400/v1/cs-product/froala/j07vr-0Kcikroz3p15riBQ.jpg)
これで、マルがゴールにあたったらゴールが消えるようになりました。
早速実行!
![](https://static.coeteco.jp/coeteco/image/upload/c_limit,f_auto,q_auto,w_1400/v1/cs-product/froala/jDYu8Yo6S3FR2r34dgEgeA.gif)
できました!!
これで、マルも人生の目的を達成することができるようになりました。
2回に渡ってつくってきた「マルの大冒険」はこれで完成です!
人生にもっと自由を
![](https://static.coeteco.jp/coeteco/image/upload/c_limit,f_auto,q_auto,w_1400/v1/cs-product/froala/1f4g_0HPdcS9fkIdkWpl6w.png)
これで完成、でもよいのですが、少し応用してもっと自由に動けるようにしてみましょう。
ジャンプと同じように、左右移動のボタンをつくることで、ゲームのコントローラーが簡単につくれてしまうのです。
左右に動かす、ということでまず右向きの矢印を描きましょう。
そしてその矢印を先ほどのジャンプボタンの右側に配置。さらにもう一つをジャンプボタンの左側に配置して2本の指でくるっと回して左向きにしてください。
それと、ボウが斜めになっていると転がって行ってしまうので、平らにしておきましょう。
![](https://static.coeteco.jp/coeteco/image/upload/c_limit,f_auto,q_auto,w_1400/v1/cs-product/froala/NUBhbnBHAh7VgMGXPiSSrA.jpg)
![](https://static.coeteco.jp/coeteco/image/upload/c_limit,f_auto,q_auto,w_1400/v1/cs-product/froala/f6237s2sMd7r93SMNGVwYQ.jpg)
![](https://static.coeteco.jp/coeteco/image/upload/c_limit,f_auto,q_auto,w_1400/v1/cs-product/froala/tbuR9AMhdCj4N5VW9hMh-Q.jpg)
ジャンプボタンにジャンプ属性を設定したように、今度は右矢印をタッチして「移動(右)」アイコンを選択、移動する対象にマルを指定します。
![](https://static.coeteco.jp/coeteco/image/upload/c_limit,f_auto,q_auto,w_1400/v1/cs-product/froala/ZJDNUJvHSXzdFtqmAk2xow.jpg)
![](https://static.coeteco.jp/coeteco/image/upload/c_limit,f_auto,q_auto,w_1400/v1/cs-product/froala/imS0X-NrQnKo77-ncTv67A.jpg)
チェックマークをタッチして設定完了。
同じように、左向き矢印に「移動(左)」を設定して完成です。
どんなふうに動かせるかは、自分でつくってみて確認してくださいね。
これをちょちょっと手を加えると、Springin'では「トレジャーゲーム」といわれているジャンルのゲームが簡単につくれます。
参考に、公式サンプルワークをダウンロードして遊んだり再編集したりしてみてください。
Springin'公式 編集可能なテンプレート(トレジャーゲーム)
※画像をクリックすると開きます↓
![](https://static.coeteco.jp/coeteco/image/upload/c_limit,f_auto,q_auto,w_1400/v1/cs-product/froala/K9Uu9Q4jk4zVTa-YyRSH6g.jpg)
世界のマーケットから
![](https://static.coeteco.jp/coeteco/image/upload/c_limit,f_auto,q_auto,w_1400/v1/cs-product/froala/T_N-XaLy16jKVYg0KHuQ4Q.png)
世界中のクリエイターが出品している作品を、僕やしくみデザインのスタッフがピックアップして紹介するコーナーです。
今回はトレジャーゲーム……から派生して、操作ボタンで遊ぶゲーム達。
まずは、マルの大冒険の正統的進化形のワークがこちら。
障害物がいっぱいでなかなか難しい!
(画像をクリックすると開きます↓)
![](https://static.coeteco.jp/coeteco/image/upload/c_limit,f_auto,q_auto,w_1400/v1/cs-product/froala/dQRrTug3-u6cpF_FEtenUQ.jpg)
転がるのではなく、落ちていくのを操作する、スカイダイブ。
落ちていく音も気持ちが良い。
(画像をクリックすると開きます↓)
![](https://static.coeteco.jp/coeteco/image/upload/c_limit,f_auto,q_auto,w_1400/v1/cs-product/froala/_8o8_1hACcMTFAaA2g60XQ.jpg)
こちらは正統派トレジャーゲーム。
地面が立体的になっているところもよくできています。
(画像をクリックすると開きます↓)
![](https://static.coeteco.jp/coeteco/image/upload/c_limit,f_auto,q_auto,w_1400/v1/cs-product/froala/enZq4KyT88Sfi053vBwzPw.jpg)
クレーンゲームだってつくれます。
実はクレーンゲームはSpringin'のマーケットでは人気のワーク。いろんなひとがいろんな趣向を凝らしたクレーンゲームをつくっています。
その中でも特に絵が美しかったのがこのワーク。これ全部、Springin'の描画ツールで描いてるんですよ。すごい!
(画像をクリックすると開きます↓)
![](https://static.coeteco.jp/coeteco/image/upload/c_limit,f_auto,q_auto,w_1400/v1/cs-product/froala/496avAOYO8UnjcR14-gZMQ.jpg)
そしてこちらは、アイデアも面白いしとにかく難しい!
やり始めたらハマります。
(画像をクリックすると開きます↓)
![](https://static.coeteco.jp/coeteco/image/upload/c_limit,f_auto,q_auto,w_1400/v1/cs-product/froala/RV_xpLbqWXMagcKsQIkVXA.jpg)
このワークは、Springin'のYouTubeチャンネルで紹介もしました。
同じ左右に動かすという操作でも、床の方を操作して、しかも落とさないようにするというゲーム。アイデア次第でいろんなゲームがつくれるんだなぁと感心します。
(画像をクリックすると開きます↓)
![](https://static.coeteco.jp/coeteco/image/upload/c_limit,f_auto,q_auto,w_1400/v1/cs-product/froala/20Y7YUDEa1dDJTbBdEtEjA.jpg)
使う機能が少なくても面白いワークはたくさんあります。
皆さんの自慢の作品をぜひ出品して教えてください!
次回の連載をお楽しみに!
中村さんの「Springin'」講座はこれから続々掲載予定!完全無料・絵日記感覚で始められるビジュアルプログラミングアプリ「Springin'」での作品作りに、ぜひチャレンジしてみてくださいね。
(ダウンロードはこちら)
Springin'(スプリンギン)は、あそんで、つくって、共有する スマホでゲームがつくれるアプリです。 ◆累計100万ダウンロード突破!◆ 言葉を使わない直感的な「ビジュアルプログラミング」で、 スマホから誰でも簡単にゲームや動くマンガがつくれるアプリです。 スプリンギンでは誰もが「クリエイター」、子どもから大人まで幅広いユーザーが「つくる」を楽しんでいます。 ...
https://apps.apple.com/jp/app/id1184243692 >
Amazonギフトカードプレゼント中!
あわせて読みたいガイド
RECOMMENDこの記事を読んだ方へおすすめ
-
マルの大冒険① ~初めての作品をつくってみよう
「Springin’(スプリンギン)」は直感的な操作で”絵日記のように”取り組めるのが特長のプログラミングツールです。この連載ではしくみデザイン代表・中村俊介氏自ら使い方をレクチャー!...
2024.11.06|中村俊介
-
絵本をつくってみよう① ~ページのめくり方
「Springin’(スプリンギン)」は直感的な操作で”絵日記のように”取り組めるプログラミングツールです。この連載ではしくみデザイン代表・中村俊介さんが使い方をレクチャー!今回は「絵...
2024.11.06|中村俊介
-
録音ツールを極める~楽器をつくってみよう!
「Springin’(スプリンギン)」は直感的な操作で”絵日記のように”取り組めるプログラミングツールです。この連載ではしくみデザイン代表・中村俊介さんが使い方をレクチャー!今回は「録...
2024.11.06|中村俊介
-
描画ツールを極める 〜自由自在に絵を描こう!
「Springin’(スプリンギン)」は直感的な操作で”絵日記のように”取り組めるプログラミングツールです。この連載ではしくみデザイン代表・中村俊介さんが使い方をレクチャー!今回は「描...
2024.11.06|中村俊介
-
お家で楽しくプログラミング教育! ~親子で謎解きゲームをつくろう~
「Springin’(スプリンギン)」は直感的な操作で”絵日記のように”取り組めるプログラミングツールです。この連載ではしくみデザイン代表・中村俊介さんが使い方をレクチャー!今回は「謎...
2024.11.06|中村俊介