スプリンギンマガジン
プログラミング入門!スプリンギンで初めてのシューティングゲーム開発

みなさん、初めまして。しくみデザインのノブです。

今年の2月に入社し、現在リレーション事業部にて、スマホでゲームがつくれるアプリ「スプリンギン」の営業をしてます。
※ちなみに、リレーション事業部とは様々な企業やサービスとコラボレーションしてコンテストや様々な企画を行う部署のことです。
今回は、入社して1週間で作ったシューティングゲームについてお話しします。
まえおき
シューティングゲームの話の前に、私のことを少しお話しさせていただきます。私は、前職ではアパレルの販売、前々職ではメーカーの営業と、これまでプログラミング、ゲーム作りとは無縁の生活を送ってきました。
ゲーム自体は昔から好きでよく遊んでいましたが、
まさかゲームを作ることになるとは思ってもいなかったので、
人生って何が起きるか本当にわからないものです。
ところで、私がなぜゲームを作ることになったかというと、入社してすぐに、コラボコンテストの提案書をスプリンギンで作ろう!ゲームも作っちゃおう!とノリノリで上司に言われたのがきっかけです。

戸惑うノブ
ゲームってそんな簡単に作れるの?大丈夫?
ゲームの作り方なんてわからないよ!
そんな感じで、私の脳内はセロトニン不足に陥りました。
そんな超が付くほどの初心者がどのようにしてシューティングゲームを作ったか?クリエイティブ要素がゼロな私でもスプリンギンを使えば簡単にゲームを制作できるのか?
初心者が初めてのプログラミングでゲームを作る過程をここに書こうと思います。
1. 何を作ろう・・・
まず、どのゲームを作るかを決めていきます。
コロコロゲーム、シューティングゲーム、アクションゲーム、、、
ゲームの種類も沢山あるんですね。これは、迷いますね。。。
また、私は絵を描くのが苦手で上手く描けるかその点が不安でしたが、
今回は強い味方がいるので安心です。
それは、「DOTOWN」という沢山のドット絵に出会えるサイトです。
バリエーション豊富な粗ドットが無料で使えるということもあって、
今回はコチラのサイトからダウンロードできるドット絵を使用してゲームを作ろうと思います。

どれもこれもかわいい素材ばかりで、かわいいの大渋滞ですね。

色んな素材を一通り見て、今回はエイリアンの素材を使った懐かしのインベーダーゲームっぽい、シューティングゲーム作品を作ることにしました。
2. ゲーム制作スタート(素材の取り込み方)
まずは、DOTOWNよりエイリアンをダウンロードし、素材をスプリンギンに取り込んでいきます。
あーかわいい。。どの子もかわいすぎる。。
まずは一つを選びお気に入りの子を選択、ダウンロードします。

ダウンロードの仕方については、コチラの動画をご覧ください!!
iPadだとこんなふうにSafariでDotown立ち上げながら素材探して「長押し→写真に追加」でスプリンギンに取り込むのがめちゃ簡単。こりゃ捗るわ。 pic.twitter.com/QKUK8WYwX6
— 中村俊介/クリエイターをクリエイトするクリエイター (@nkmrshnsk) March 6, 2022
さて、素材をダウンロードしたらiPad内の写真に画像が入ってるのを確認。(他の素材も可愛すぎて沢山ダウンロードしているのは内緒です。)

私のiPhoneのカメラロールです。
次にスプリンギンを立ち上げて、トップページの緑色のプラスボタンをタップします。

この画面に切り替わるので、アイテム追加ボタン(白色のボタン)をタップ。

アイテム作成画面が開いたら、背景モードボタンをタップ。

背景モードを開いたら、いよいよ画像を取り込んでいきます。

次の画面に移動したら、画像モードのボタンをタップします。

ここでカメラロールを選択します。

iPad内のカメラロールに切り替わったら、取り込みたい素材を選択します。

選択すると、この画面に切り替わるのでここで大きさや角度を調整して、OKなら緑色の完了ボタンをタップします。

編集画面に切り替わり、OKであれば緑色の完了ボタンをタップします

これで無事に素材を取り込むことができました!!

素材集めに夢中で時間配分を誤りかけましたが、素材の取り込みは、スプリンギンなら簡単。素人の私でも一瞬でできました。
次は素材に仕掛けを施していきます。
エイリアンの動き、コントローラ作り、タイマーなどをデザインして配置して整えていきます。
さぁ、果たして取り込んだ素材を動かすことができるのか!?
3. トラブル発生
あれっ、、、、反応してくれません。当たっても消えません。

うまく、仕掛けが設定されていないようです。
実は、今回ゲームを作る際に、一番困ったのがこの部分です。
「どのアイテムがどのようになったら消える」のか、「どのアイテムがどのようになったら別のページに切り替わる」のか、など他のアイテムとの関係性をつくる場面が、一番苦労しました。

これは、悩んでますね。悩み過ぎて違うこと考えてそうですね。
しかし、私には心強い相棒がいます。
どーん!!頼もしい相棒です。

「はじめてのスプリンギン」好評発売中!!
購入はコチラから
書籍「はじめてのスプリンギン」、マガジンやnoteなどのオフィシャル入門記事、
YouTubeもフル活用でこの困難に立ち向かいます!
4.シューティングゲームが完成!!
そして・・・遂に完成!!

\粗ドットで #ムダゲー つくってみた /
作者はなんと #スプリンギン 歴1週間の初心者メンバー🔰
こんなゲームが誰でも簡単に作れちゃいます😍#DOTOWN で素材をチェック👇https://t.co/xC6VvBR9Hg#ムダゲーコンテスト 詳細はこちら👇https://t.co/g6t4Pfee2H#前田デザイン室 @DESIGN_NASU pic.twitter.com/4RRX3vqr0o— Springin'/スプリンギン*スマホでゲームがつくれるアプリ (@springin_jp) 2022年3月3日
ど素人だった私が、ゲームを作れるようになるなんて、、
達成感に満ち溢れて、脳内がセロトニンでいっぱいいっぱいです。
それでは早速、遊んでみたいと思います。
おおっ!ちゃんと動く!打てる!

コントロールキーはうんちです。
そしてクリアできない。

うんち猫かわいい。
何回かトライしてようやくクリアできました。

このように、プログラミングをやったことがない私でも、簡単にゲームを作ることができました。
今回のゲームはコラボ企画の提案書の一部ということもあり、前田デザイン室さんとの打ち合わせの時に、実際に動かしながらプレゼンをしました。相手はデザインのプロ中のプロ。最初は不安もありましたが、キャラクター達が動いているところや、ゲームも気に入っていただけたことが、挑戦して良かったと心から思った瞬間でした。

オンライン打ち合わせ中のノブ
5. さいごに
今回の経験を踏まえて、みなさんにお伝えしたいことは、
DOTOWNはとにかく可愛い素材が沢山ある!!
スプリンギンはとにかく敷居が低い!!はもちろんですが、
作品を生み出す楽しさを知ってもらいたいということです。
自分が作った作品が遊んでもらえる、認めてもらえる、
これは作った人にしか味わえない体験だと思います。
得られるものしかないですし、失うことは何もありません。
そしてそして、
現在スプリンギンでは、DOTOWNとのコラボコンテストを開催中です!
今回のテーマは「わたしのムダゲー」というテーマで応募作品を募集中です。
※2023年現在、募集は終了しております。
「つくるたのしさ」に振り切っちゃったゲーム、思わず笑っちゃうゲームにあなた自身の「おもろ!たのし!」という想いを乗せて、「いいな!」をうみだしてください。
今回はDOTOWN内のドット絵を使うので、昔懐かしいレトロゲームも作れちゃいます。
ゲームが好きな人、作るのが好きな人はもちろんですが、
絵に苦手意識がある人、沢山の方にチャレンジしてもらいたいです。

皆さまからのご応募を心よりお待ちしております。
以上、ノブでした。
Springin’をはじめよう

教育機関でのご利用はこちら
Springin’ Classroom
ワークショップ・イベントでのご活用はこちら
プログラミングワークショップ!コラボ受付中
自分でゲームを作ってみたい方はこちら
スマホでゲーム作成が簡単にできる「スプリンギン」とは