SpriteKitでゲーム【やくいんツムツム】を作ってみた1

SpriteKitでゲーム【やくいんツムツム】を作ってみた1

皆様いかがお過ごしでしょうか?

先日、同僚が熱心にLine ツムツムを遊んでいるところをみて、これが社内の人間の顔写真だったらとても面白いなと思い試しに作ることにしてみました。

やくいんツムツム

画面上から毎秒落ちてくる社長並びに取締役役員を、同じ人間ごとにつないで消すと得点が増えるぞ!
高得点を取って「やくいん」や「しゃちょー」を目指そう。

スクリーンショットはこちら↓
image06

動画はこちら↓

ゲームの作り方

1:XCodeを開いてCreate a new Xcode projectをクリック!
2:iOS->ApplicationよりGameを選択!
3:適当な名前(ProductName)を決めてくれよな!
4:開発言語はObjective-CかSwiftのどちらかを選択するが
 今回はObjective-Cの説明だぞ!
5:ゲームを開発
デフォルトで「GameScene」「GameViewController」というファイルがあるから
今回はここだけいじっているぞ!!

SpriteKitとは

タイトルに記載のSpriteKitがよくわからない人に簡単な説明をさせていただきます。

Apple公式リファレンスより引用

SpriteKit provides a graphics rendering and animation infrastructure that you can use to animate arbitrary textured images, or sprites. SpriteKit uses a traditional rendering loop where the contents of each frame are processed before the frame is rendered. Your game determines the contents of the scene and how those contents change in each frame. SpriteKit does the work to render frames of animation efficiently using the graphics hardware. SpriteKit is optimized so that the positions of sprites can be changed arbitrarily in each frame of animation.
SpriteKit also provides other functionality that is useful for games, including basic sound playback support and physics simulation. In addition, Xcode provides built-in support for SpriteKit so that you can create complex special effects and texture atlases directly in Xcode. This combination of framework and tools makes SpriteKit a good choice for games and other apps that require similar kinds of animation. For other kinds of user-interface animation, use Core Animation instead.

残念ながら公式では英語のドキュメントしか用意されていません。

簡単に言うと、
Appleが提供している2Dゲーム開発に特化したフレームワークです。

iOSの開発になれている私としては、Objective-Cライクな書き方でいけますし、本来のUIKITとも連携することができたりするのでとてもサクサクと開発ができます。

3Dゲーム開発がお望みのかたは、SceneKitというのをお調べください。

残念ながら、SpriteKitはAppleが提供していることもありiOSでしか開発できません。

Androidなどでも開発を行いたい場合は、Cocos2dがおすすめです。

プログラム前の下準備

◼︎弊社役員の皆様の顔写真を丸く切り抜く

弊社の会社概要から画像を拝借し以下4つの画像を用意いたしました。

image11代表取締役社長  森 雅弘
image07取締役副社長  永田 豊志
image09取締役 高山 慎太郎
image08取締役 弓削田 公司

役員を消してニヤニヤするというくだらないアイデアでも、快くブログ掲載の許可をいただきました。

懐広い役員の方々に囲まれて、とても良い開発環境の中で仕事をできており、感謝せざるを得ません。

◼︎切り抜いた画像をimages.xcassetsにいれる

画像をimages.xcassetsに入れることによって簡単にリソース管理が行えます。

image10

GameSceneの内容

◼︎基本画面の作成

GameSceneが表示されたタイミングで呼び出される関数です。
この中で簡単なセットを行います。

以下先頭の()はグローバル変数です。

先ほどの画像につけた名前とおなじ苗字を配列にしております。

画面上部に表示されているポイントを表示しています。

最初に画面に3個ほど円状のSKNodeを生成し画面に貼り付けます

は自前の関数になりますのでこの中身を見てみたいと思います。

→半径25の円のNodeを作成し

→それにPhysicsBodyという剛体をセットします。

→さらにランダムに取得した役員の苗字に紐付いた画像のNodeをcircleにaddChildしています。

剛体とは?

SKSpriteNodeというのは、単なる絵のようなものであります。

これを物体のように落ちたりぶつかったり跳ねたり滑ったりするための目に見えない物体の特性を加えることで、落ちて転がるゲームを作ることが可能です。

この物理特性のことを剛体と言います。

全部のゲームに必ずしも必要なものではないですが、引っ張りアクション系や重力があるゲームなどはこの剛体を加えることが必要になります。

part1ではここまで!
part2では、なぞって消すところまで説明したいと思います!
乞うご期待!

● Lineツムツムの紹介
https://itunes.apple.com/jp/app/line-dizuni-tsumutsumu/id724594093?mt=8
とっても面白いゲームです!

コメント