paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」(https://paiza.jp ギノ株式会社)の開発者が開発の事、プログラミングネタ、ITエンジニアの転職などについて書いています。

スマホだけでゲーム開発が完結できる画期的なアプリ「HopScotch」の遊び方を徹底解説!

f:id:paiza:20170530114114j:plain
どうも、まさとらん(@0310lan)です。

今回は、iPhoneiPadなどから手軽にゲーム開発ができるオススメの無料アプリをご紹介します!

開発方法がとてもユニークで、指先1つで「ブロック」をドラッグすれば本格的なロジックをプログラミングすることが可能です。

初心者の人も楽しみながらオリジナルゲームが作れるので、ぜひこの機会に挑戦してみましょう!

Hopscotch

f:id:paiza:20170530114149j:plain

■「Hopscotch」とは?

Hopscotch」を使えば、スマホだけでアクション、シューティング、RPGなどのゲームや、お絵かきツールとかWebサイトっぽい画面なども簡単に構築できます!
f:id:paiza:20170530114206g:plain
難しいコードを書く必要もなく、指先1つでさまざまなオリジナル作品を作って世界中のユーザーに遊んでもらったり、Web上に公開することも可能です。

また、チュートリアルが豊富に用意されているうえ、他のユーザーが作った作品を「フォーク」し、自分なりに改造して再利用できる仕組みも搭載されています。

そこで、まずはどのように開発をしていくのか、基本的な部分から見ていくことにしましょう!

■基本的な使い方!

それでは、簡単なサンプル例として、スマホの画面を「タップ」するとキャラクターが空中で1回転するプログラムを作ってみます。
f:id:paiza:20170530114259g:plain


まずはアプリを起動し、タブメニューから「+」アイコンをタップして「エディタ画面」を表示させましょう!
f:id:paiza:20170530114324j:plain


エディタ画面にある「+」アイコンをタップすると、多彩なキャラクターやシェイプ画像・絵文字などを選択できます。
f:id:paiza:20170530114346j:plain
今回は、好きなキャラクターを選んで、エディタ画面にドラッグし、「+ Add code」ボタンをタップしましょう。


すると今度は「コードエディタ」が表示されるので、下の「ブロックメニュー」からプログラムの「実行タイミング」を選択します!
f:id:paiza:20170530114401j:plain
実行タイミングというのは、例えば「ゲームが起動した時」「画面をタップした時」「スマホを傾けた時」…など、どんな状態の時にプログラムを実行したら良いのかを決めるという意味です。

今回は、スマホの画面をタップしたらキャラクターが1回転するというプログラムにしたいので、「is Tapped」ブロックを選択しましょう!


続いて、メニューから「Jump」ブロックを選択します。
f:id:paiza:20170530114415j:plain
これだけで、プログラムはもう完成です!


右上にある「プレビュー」ボタンをタップしましょう。
f:id:paiza:20170530114429j:plain


スマホの画面をタップすると、見事にキャラクターが空中で1回転するはず!
f:id:paiza:20170530114442g:plain

■「コードブロック」を詳しく学ぼう!

それでは、「Hopscotch」のプログラミングについてもう少し詳しく見ていきましょう!

先ほどのサンプル例でもご紹介しましたが、このアプリではスマホタブレットのいろんな状態を認識してプログラムを実行することができます。
f:id:paiza:20170530114511j:plain
簡単に箇条書きすると、以下の通り!

  • 画面をタップしたら…(長押しも可)
  • 画面をスワイプしたら…(方向も認識可)
  • 端末を傾けたら…(方向も認識可)
  • 端末を振ったら…

など。

また、マイク入力も利用可能で、例えば「大きな声がしたら…」プログラムを実行するという使い方もOKです!

これらの機能を活用するだけでも、楽しいゲーム開発ができそうですね。


ゲームでよく利用する「当たり判定」に関しても、「何」と「何」が衝突したらどうするかを簡単に組み立てられるので便利です!
f:id:paiza:20170530114537j:plain
面倒な座標計算などは一切不要で、対象物を指定するだけなので直感的で分かりやすいでしょう。


「効果音」も数多く搭載されており、好きな音源を自由に設定可能です!
f:id:paiza:20170530114554j:plain
音階のあるメロディーや、ゲームでよく使われる音、環境音、人の声…など、かなり充実しています。


また、ロジックを組み立てるのに必要なメソッドに関しては、とても細かく用意されています。
f:id:paiza:20170530114608j:plain
座標制御、カラー、スプライト制御、テキスト、描画系、変数、乱数(数学系)、ループ処理、条件分岐…など、ゲームロジックを作るのに必要なものは一通り「ブロック化」されています。


また、多数のブロックを繋げていくと複雑化しがちですが、関数のように1つのブロックにまとめることも可能です!
f:id:paiza:20170530114633j:plain


実は、冒頭のサンプルで利用した「Jump」ブロックは、3つの「コードブロック」を1つにまとめたモノだったんです。
f:id:paiza:20170530114645j:plain
「Y座標の増減」と「回転」を行うブロックを1つにしており、これを実行することでジャンプしているように見せていたわけです。

このように、複数のブロックをグループ化(関数化)することで、さらに簡単なプログラミングが実現できるのでオススメです!

■作品を公開してみよう!

さて、ある程度プログラムが完成したら、世界中の人が遊べるように公開してみましょう!

方法は簡単で、プログラムのプレビュー画面で「Publish」ボタンをタップし、「作品名」を入力すれば完了です!
f:id:paiza:20170530114706j:plain
これだけで、「HopScotch」ユーザーのタイムラインに流れるようになるので、たくさんの人がプレイしたりコメントを寄せてくれるわけです。


さらに、公開された作品は簡単にシェアが出来るようになっています!
f:id:paiza:20170530114717j:plain
SNSにシェアして友人・知人に遊んでもらったり、URLをコピーしてPCブラウザから遊ぶことも可能です!


また、他のユーザーが投稿しているゲームで遊んだり、コードも閲覧できるので自分なりに改造して再編集することも可能です!
f:id:paiza:20170530114729j:plain
「Publish Remix」ボタンから改造したゲームを再投稿することもできます。

他のユーザーが投稿しているゲームは勉強にもなるし、ゲームのジャンルやハッシュタグなどを使ってフィルタリングすることも出来るので便利ですよ。

チュートリアルを活用しよう!

Hopscotch」は、アプリの中にチュートリアルが多数用意されています。

例えば、簡単なサンプルゲームを作りながら「コードブロック」の使い方を教えてくれる入門コースや、動画を見ながら1つのゲームを完成させるコースなどがあります!
f:id:paiza:20170530114749j:plain
これらのコースは、無料・有料のものがありますが、基本的な操作を覚えるだけなら無料コースだけでも十分でしょう。


また、公式のYouTubeチャンネルには、多数のチュートリアル動画やユニークなゲームなどがたくさん公開されています!

HopScotchチャンネル|YouTube

f:id:paiza:20170530114817j:plain
「Flappy Bird」のようなアクションゲームの作り方や、「Pokemon GO」みたいな戦闘画面の作り方など、面白いチュートリアルが多いので必見です!


このように優秀なチュートリアルが数多く利用できるので、ゲームの基本的な作り方を覚えながらオリジナルの作品作りに挑戦しやすいでしょう。

もし、分からないことが起きても、ユーザー同士で解決し合う「専用フォーラム」も設置されているので、積極的に活用してアドバイスをもらえるのもうれしいところです。

■動画で学べるpaizaラーニングに「ゲームエンジニア入門編」が新登場!


動画で学べるオンラインプログラミング学習サイト「paizaラーニングでは、ゲームエンジニア入門編1: キャリアや働き方について学ぶのレッスンを公開中です!

ゲームエンジニアとしてのキャリアや働き方について学ぶことで、就職・転職活動の方向性や、より自分とマッチする企業や職種を探す手助けとなります。

既にゲームエンジニアを目指して就職・転職活動中の方はもちろん、「まだ活動はしていないけど興味がある」「ゲームエンジニアってどんな仕事?」という方にも役立つレッスンとなっております。

◆動画レッスンの内容

01:はじめに
02:ゲーム業界の種類
03:ゲーム開発業態
04:業態ごとの開発手法の違い
05:開発工程ごとの必要となる技能
06:ゲーム業界の職種

■まとめ

今回ご紹介した「Hopscotch」は、バージョンアップが非常に活発で、日々ユーザーが扱いやすいように改良を続けているのが好印象です。

また、面白いアイデアを思い付いたら、すぐにプロトタイプを開発して実際に遊んでみることができるのも大きな魅力で、そのまま公開してさまざまな意見をもらうのも良いでしょう。

ゲーム開発に興味のある人はもちろんですが、プログラミングに興味がある方でも非常に楽しめると思いますので、ぜひみなさんもオリジナル作品を作ってみましょう!


<参考>




paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

↓詳しくはこちら
paiza.jp

そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
paiza.jp
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

ITプログラマ・エンジニア向け転職・就活・学習サービスのpaiza