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

アプギガトップ > スマホ・モバイル > 指先1本でミニゲームを開発してシェアし合う新型SNSアプリ「Hopscotch」で遊んでみた!
注目記事ピックアップ
ググる前にチェックすべき「Web開発系」サービスをまとめた至高の情報サイト8個+α!
share0
ググる前にチェックすべき「Web開発系」サービスをまとめた至高の情報サイト8個+α!
開発が面倒なWebコンテンツを「ウィジェット化」して誰でも利用可能にする無料サービス「Widgetic」を使ってみた!
share0
開発が面倒なWebコンテンツを「ウィジェット化」して誰でも利用可能にする無料サービス「Widgetic」を使ってみた!
ブラウザから即起動!ゼロからSVG画像を作成できるWebエディタ「Vectr」が完全無料で公開中!
share0
ブラウザから即起動!ゼロからSVG画像を作成できるWebエディタ「Vectr」が完全無料で公開中!
わずか1行のコードで、Web制作が劇的に捗るサービスと連携し放題になる「StackPile」を使ってみた!
share0
わずか1行のコードで、Web制作が劇的に捗るサービスと連携し放題になる「StackPile」を使ってみた!
「アプギガ!!」2016年の総まとめ!もう一度読みたくなる人気のバズ記事をまとめてみた!
share0
「アプギガ!!」2016年の総まとめ!もう一度読みたくなる人気のバズ記事をまとめてみた!
指先1本でミニゲームを開発してシェアし合う新型SNSアプリ「Hopscotch」で遊んでみた!
share0
指先1本でミニゲームを開発してシェアし合う新型SNSアプリ「Hopscotch」で遊んでみた!
英語で「VR空間作って」と書くだけで、本当にWeb上でVR体験が実現する「GuriVR」を使ってみた!
share0
英語で「VR空間作って」と書くだけで、本当にWeb上でVR体験が実現する「GuriVR」を使ってみた!
天才的な猛者が開発した究極の「HTML5ゲーム」16選が思わず熱くなり過ぎる件!
share0
天才的な猛者が開発した究極の「HTML5ゲーム」16選が思わず熱くなり過ぎる件!
GoogleドライブにTrello風タスク管理機能を拡張できる「Kanbanchi」を試してみた!
share0
GoogleドライブにTrello風タスク管理機能を拡張できる「Kanbanchi」を試してみた!
好きなYouTube動画の「見て欲しいシーン」だけを抽出して再公開できる「vibby」が便利すぎる件!
share0
好きなYouTube動画の「見て欲しいシーン」だけを抽出して再公開できる「vibby」が便利すぎる件!
ブロックを繋げるだけでチャットボットが作成できる「Motion AI」は、WebもSNSも無料で運用可能!
share0
ブロックを繋げるだけでチャットボットが作成できる「Motion AI」は、WebもSNSも無料で運用可能!
有名WebサービスのAPIをすべて同じ書き方でプログラミング可能な「RapidAPI」は、検索・テストもブラウザ上で実行可能!
share0
有名WebサービスのAPIをすべて同じ書き方でプログラミング可能な「RapidAPI」は、検索・テストもブラウザ上で実行可能!
JavaScriptの学習にオススメなWebコードエディタ「Carbide」の万能すぎる可視化ウィジェットがヤバイ!
share0
JavaScriptの学習にオススメなWebコードエディタ「Carbide」の万能すぎる可視化ウィジェットがヤバイ!
エアフォースワンの内部もVR空間に!Web上であらゆる場所を歩き回れる「Matterport 3D Gallery」の没入感がスゴイ!
share0
エアフォースワンの内部もVR空間に!Web上であらゆる場所を歩き回れる「Matterport 3D Gallery」の没入感がスゴイ!
タスク管理の「Trello」にWeb制作機能を搭載できる「CardForm」が斬新過ぎてスゴイ!
share0
タスク管理の「Trello」にWeb制作機能を搭載できる「CardForm」が斬新過ぎてスゴイ!
Webサイトに訪れたユーザーの行動を「映像化」してトラッキングできる「Jaco」を使ってみた!
share0
Webサイトに訪れたユーザーの行動を「映像化」してトラッキングできる「Jaco」を使ってみた!
プログラミングしないと戦えないWebストラテジーゲーム「Empire of Code」が時間泥棒確定!
share0
プログラミングしないと戦えないWebストラテジーゲーム「Empire of Code」が時間泥棒確定!
登録不要!匿名で記事も公開できる究極にシンプルなWebエディタ「IO」が最高の使い心地だった!
share0
登録不要!匿名で記事も公開できる究極にシンプルなWebエディタ「IO」が最高の使い心地だった!
まだ進化を続けるGoogle検索の特殊機能12選をまとめてみた!
share0
まだ進化を続けるGoogle検索の特殊機能12選をまとめてみた!
ブロックを繋げてWebアプリやゲームを作れる「Weld Action Blocks」が思わず夢中になる面白さ!
share0
ブロックを繋げてWebアプリやゲームを作れる「Weld Action Blocks」が思わず夢中になる面白さ!
スマホ・モバイル
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...

ページトップへ戻る