シェアしたくなる最新のWebサービス・ITニュース情報をチェック!
  • follow us in feedly

アプギガトップ > スマホ・モバイル > 指先1本でミニゲームを開発してシェアし合う新型SNSアプリ「Hopscotch」で遊んでみた!
注目記事ピックアップ
ググる前にチェックすべき「Web開発系」サービスをまとめた至高の情報サイト8個+α!
share0
ググる前にチェックすべき「Web開発系」サービスをまとめた至高の情報サイト8個+α!
実はゲーム機として優秀なスマホ「Galaxy S7 edge」でポケモンGOを遊び倒してみた!<PR>
share0
実はゲーム機として優秀なスマホ「Galaxy S7 edge」でポケモンGOを遊び倒してみた!<PR>
Web上でプログラミングに特化したスクリーンキャストを無料で作れる「Scrimba」の革命的な機能がスゴイと話題に!
share0
Web上でプログラミングに特化したスクリーンキャストを無料で作れる「Scrimba」の革命的な機能がスゴイと話題に!
ブログ感覚でオンラインのプログラミング講座を作成・公開できる「educative」は課金機能も無料で利用可能!
share0
ブログ感覚でオンラインのプログラミング講座を作成・公開できる「educative」は課金機能も無料で利用可能!
ブロックを繋げるだけでチャットボットが作成できる「Motion AI」は、WebもSNSも無料で運用可能!
share0
ブロックを繋げるだけでチャットボットが作成できる「Motion AI」は、WebもSNSも無料で運用可能!
英語で「VR空間作って」と書くだけで、本当にWeb上でVR体験が実現する「GuriVR」を使ってみた!
share0
英語で「VR空間作って」と書くだけで、本当にWeb上でVR体験が実現する「GuriVR」を使ってみた!
わずか1行のコードで、Web制作が劇的に捗るサービスと連携し放題になる「StackPile」を使ってみた!
share0
わずか1行のコードで、Web制作が劇的に捗るサービスと連携し放題になる「StackPile」を使ってみた!
有名WebサービスのAPIをすべて同じ書き方でプログラミング可能な「RapidAPI」は、検索・テストもブラウザ上で実行可能!
share0
有名WebサービスのAPIをすべて同じ書き方でプログラミング可能な「RapidAPI」は、検索・テストもブラウザ上で実行可能!
まだ進化を続けるGoogle検索の特殊機能12選をまとめてみた!
share0
まだ進化を続けるGoogle検索の特殊機能12選をまとめてみた!
指先1本でミニゲームを開発してシェアし合う新型SNSアプリ「Hopscotch」で遊んでみた!
share0
指先1本でミニゲームを開発してシェアし合う新型SNSアプリ「Hopscotch」で遊んでみた!
こんなAR技術が欲しかった!スマホをかざすだけでプロ並みのスケッチを描ける「SketchAR」アプリを使ってみた!
share0
こんなAR技術が欲しかった!スマホをかざすだけでプロ並みのスケッチを描ける「SketchAR」アプリを使ってみた!
編集ソフト不要!アップロードした画像のURLをいじるだけで多彩な加工編集を実現する「Scaley.io」が登録不要で無料公開中!
share0
編集ソフト不要!アップロードした画像のURLをいじるだけで多彩な加工編集を実現する「Scaley.io」が登録不要で無料公開中!
思わずWeb開発したくなる最強のJavaScriptライブラリ7選が楽し過ぎてヤバイ!
share0
思わずWeb開発したくなる最強のJavaScriptライブラリ7選が楽し過ぎてヤバイ!
ブラウザから即起動!ゼロからSVG画像を作成できるWebエディタ「Vectr」が完全無料で公開中!
share0
ブラウザから即起動!ゼロからSVG画像を作成できるWebエディタ「Vectr」が完全無料で公開中!
データ可視化の最強ツール!Web上でスライド資料やインフォグラフィックを制作できる万能Webエディタ「Visme」を使ってみた!
share0
データ可視化の最強ツール!Web上でスライド資料やインフォグラフィックを制作できる万能Webエディタ「Visme」を使ってみた!
天才的な猛者が開発した究極の「HTML5ゲーム」16選が思わず熱くなり過ぎる件!
share0
天才的な猛者が開発した究極の「HTML5ゲーム」16選が思わず熱くなり過ぎる件!
エアフォースワンの内部もVR空間に!Web上であらゆる場所を歩き回れる「Matterport 3D Gallery」の没入感がスゴイ!
share0
エアフォースワンの内部もVR空間に!Web上であらゆる場所を歩き回れる「Matterport 3D Gallery」の没入感がスゴイ!
GoogleドライブにTrello風タスク管理機能を拡張できる「Kanbanchi」を試してみた!
share0
GoogleドライブにTrello風タスク管理機能を拡張できる「Kanbanchi」を試してみた!
筆跡がリアルに変化する「自作Webフォント」を生成可能な「Calligraphr」で自分用フォントを手書きしてみた!
share0
筆跡がリアルに変化する「自作Webフォント」を生成可能な「Calligraphr」で自分用フォントを手書きしてみた!
開発が面倒なWebコンテンツを「ウィジェット化」して誰でも利用可能にする無料サービス「Widgetic」を使ってみた!
share0
開発が面倒なWebコンテンツを「ウィジェット化」して誰でも利用可能にする無料サービス「Widgetic」を使ってみた!
スマホ・モバイル
ad 今の年収で満足ですか?
typeで転職した71%が年収アップ!
2016/09/16 19:50

指先1本でミニゲームを開発してシェアし合う新型SNSアプリ「Hopscotch」で遊んでみた!

hopscotch-01 どうも、まさとらん(@0310lan)です!

今回は、スマホのタップ操作で気軽にゲームを作り、それを不特定多数の人にシェアして遊んでもらうことが出来るちょっと変わったSNSアプリ(無料)をご紹介します!

【 Hopscotch 】
hopscotch-02
ゲームを作るためのプログラミングは、さまざまな「機能」を持ったブロックを組み合わせることで実現します。
そのまま世界中へ公開することも出来るし、興味のあるゲームを見つけたら「フォーク」して自分なりに改造することも可能なのでプログラミング学習にも最適です。

スマホ1台あれば、今すぐゲーム制作を始められるのは非常にお手軽で始めやすいと思いますよ!


使い方!

それでは、「Hopscotch」がどのようなアプリなのかを実際に「ミニゲーム」を作りながらご紹介しようと思います!

今回は、サンプルとして「Flappy Bird」のようなタップゲームを作ってみましょう。


まず、アプリを起動していくつかあるテンプレートの中から、「Flappy Bird」をタップます。
hopscotch-03

すると、ゲーム制作エディタが表示されて、動画によるチュートリアルが開始されるようになっています。
hopscotch-04
プログラミング初心者の方でも、この動画を見ながら同じように操作を進めていけばゲームが完成するようになっているので便利です。

動画は20分くらいあるので、今回は最低限のポイントに絞ってどのようにゲームを作っていくのかを見ていきましょう!


まずは、豊富に用意されている「図形」や「画像」の中から、これから作るゲームのキャラクターを「➀選択」して画面に「➁配置」します。
hopscotch-05 配置できたら、「➂ +Add code」と書かれた部分をタップしましょう。


すると、先ほど配置したキャラクターの「動き」をプログラミングできるエディタが表示されます。
hopscotch-06
このエディタを使って、どのような動きをさせたいかを自由にプログラミング出来るわけです。


今回作る「タップゲーム」は、ざっくり言うと以下のような動きが必要でしょう。

・何も操作しないとキャラクターは地面に落下する
・スマホの画面をタップする度にキャラクターは上昇する

そこで、まずはキャラクターが落下するような動きをつけてみましょう。


画面下にある「ブロック」の中から、「➀ Game Starts」ブロックをタップしてエディタ内に「➁配置」します。
hopscotch-07 これで、ゲーム開始時に行いたい処理を書くことが出来るようになります。

あとは、キャラクターの縦座標(Y軸)を変更することで、画面下へ落下するような動きをつけたいと思います。


「➀繰り返し処理」と「➁縦座標(Y軸)の変更」ができるブロックを配置します。
hopscotch-08 キャラクターの縦座標(Y軸)を操作したいので、新規に「➂変数」を作っておきましょう。


変数名は何でも良いのですが、今回は「➀birdMove」と設定します。
hopscotch-09 すると、作成した変数が「➁ブロック」として表示されたのが分かります!


この変数を操作したい「➀縦座標(Y軸)に配置」し、「➁Increase Value」ブロックを使って画面下へ移動するように設定します。
hopscotch-10 そして、「➂プレビュー」ボタンをタップすると、キャラクターが落下していくのが分かると思います。


次に、スマホ画面をタップしたらキャラクターが上昇するようにしたいので、新しく「➀is Tapped」ブロックを配置します。
hopscotch-11 先ほど作った「game starts」ブロックの下に「➁配置」する点に注意しましょう。


画面をタップした際の処理を書けるようになったので、「➀Set Value」ブロックを使って先ほど作成した変数「birdMove」に加算して上方向に移動するようにします。
hopscotch-12 これで、キャラクターは落下しつつも、スマホ画面をタップする度に上昇する動きを実現することが出来ました。

あとは、障害物をランダムに出現させれば、とりあえずゲームっぽくなるはず!


そこで、長方形の「➀シェイプ画像」を画面に「➁配置」してみましょう。
hopscotch-13 次に、キャラクターの動きを設定した時と同じように、この障害物にも「動き」を指定していきます。


障害物は、ランダムな「速度」「位置」から出現し、画面の右から左へ流れていくようにしようと思います。
hopscotch-14 そのため、「繰り返し処理」内で「➀速度」と「➁位置」をランダムな値に設定しています。

同様にして、カラーやサイズなどもランダムに変更したり、効果音を付け加えたりすれば、より面白い雰囲気が楽しめるでしょう。


そして、「➁Change X by」ブロックで横移動を実現していますが、画面左端まで移動したら障害物を「➂非表示」にしておきます。
hopscotch-15 これにより、次の繰り返し処理で画面右からまた障害物が出現するかのように見えるわけです。(再度、「➀表示」させるのを忘れないようにしましょう…)


プレビュー表示すると、こんな感じのシンプルなゲームが遊べるはず!
hopscotch-16


ちなみに、「当たり判定」を実装するには「bumps」というブロックをキャラクターに配置します。
hopscotch-17 あとは、「➀何」と「➁何」が衝突するのかを決めるだけです。

そして、衝突が発生したらキャラクターを「➂非表示」にします。(本来ならゲームオーバー処理などを行いますが…)


基本的なプログラミングはこんな感じで進んでいきます。
もう少し慣れていけば、スコア表示を作ったり、ステージレベルの要素を追加したり…など、より本格的な作りこみも実現できるようになるでしょう。

ブロックの種類を覚えるのに最初は戸惑うかもしれませんが、「こんな処理をしたい!」という要望はたいてい「ブロック化」されているので、直感的に組み合わせられるようになっているのも特徴と言えます。


ゲームを公開してみよう!

ある程度、ゲームが完成したら自分の作品を世界中に公開してみましょう!

方法は簡単で、プレビュー画面の上部にあるメニューから「➀Publish」ボタンをタップするだけでOKです!
hopscotch-18 作品の「➁タイトル名」を入力するのを忘れないようにしましょう。

公開されると、「HopScotch」アプリ内のタイムラインに表示されるので、不特定多数のユーザーが遊んでくれるようになります。


また、「➀オプション」ボタンをタップすると、「Pocket」や「Evernote」などと連携することも可能です!
hopscotch-19

実は、公開されると専用のURLも発行されているので、PCのブラウザからでも遊べるようになっています!
hopscotch-20 しかも、「埋め込みタグ」まで生成されるので、自分のブログやサイトなどへ簡単に貼り付けることが可能です!
これにより、「Hopscotch」アプリを持っていない友人・知人にシェアすることも出来るのは嬉しいところでしょう。

また、公開されているゲームは、誰の作品であっても自分で編集することが可能なので、オリジナル要素を追加するなど改造を楽しむことが出来るのも魅力的です。


公式サポートを活用しよう!

アプリに搭載されている「動画チュートリアル」だけでも十分な学習ができますが、公式のYouTubeチャンネルにはさまざまな作品が公開されています。

【 Hopscotch: Creative Coding 】
hopscotch-21 運営スタッフによるユニークなチュートリアル動画は、いろいろ勉強になってオススメですよ。


また、どうしても解決できない問題が発生した場合には、活発に意見交換が行われている公式の「フォーラム」が便利です!

【 Hopscotchフォーラム 】
hopscotch-22 英語ですが、プログラミングの方法を教えてもらったり、機能要望を伝えてみたりなど、誰でもすぐに参加できるので非常にオススメです!


さらに、プログラミング学習や勉強会などで役立つように、80ページ以上の電子書籍がPDFで無料ダウンロード出来るようになっています!

【 無料カリキュラムPDF 】
hopscotch-23 数種類のミニゲーム作りを通して、「Hopscotch」の使い方はもちろん、プログラミングの概念を分かりやすく学べるようになっているので活用してみてはいかがでしょうか。


おまけ

「Hopscotch」はスマホでゲーム制作をするアプリでしたが、PCブラウザで同じようにブロックを組み合わせながら本格的なゲーム制作ができるサービスもあるので、合わせてご紹介しておきます!

【コーディング不要のHTML5ゲームエンジン「WiMi5」は、課金実装も可能で全部無料!】
hopscotch-24 「シューティング」「アクション」「パズル」…など、2Dゲームであればどんな作品でもコード不要で作れてしまうのが魅力のWebサービスです。

プログラミング方法は、さまざまな機能を持ったブロック同士を線で繋げて組み立てていく方式なので、慣れてしまえば誰でも簡単にロジックを構築することが出来るようになります。
また、ゲームに必要なアニメーションエディタも搭載し、ゲーム内課金機能も実装できるなど、作り込めば本格的なゲーム制作が実現できるでしょう。

ご興味ある方は、ぜひ一読くださいませ!


まとめ

「Hopscotch」は、サクッと遊べるシンプルなミニゲームを簡単に作れるようになっていますが、ゲーム以外のアプリを構築することも可能です。

例えば、「ドット絵エディタ」や「アート作品」など、その表現方法は無限にあると思います。

現在も、定期的にバージョンアップが続いており、「フォーラム」などを通じて新しい機能も積極的に組み込まれています。

みなさんも、ぜひスマホで気軽にゲーム制作を楽しんでみてはいかがでしょうか!


<参考>
「Hopscotch」公式サイト



written by まさとらん(@0310lan

まさとらん

国内外問わず「良いモノ」だけひたすら集めて情報共有してます。
厳選ネタはアプギガ内で分かりやすく情報発信中!
その他の旬なネタは、twitterにて発信してますので、お気軽にどうぞ!

twitter:0310lan

この記事を読んでいる人は、他にこんな記事も読んでいます。
Related Posts Plugin for WordPress, Blogger...

ページトップへ戻る