Swift Playgroundsで遊ぶ(2)　「図形を描く」

前回は「対話」テンプレートを使って遊びましたが、今回は「図形」テンプレートを使って遊びます。

前回はこちら。

「図形」テンプレート

下のテンプレート集から「図形」を選んで、ダウンロードします。

こちら、実はネットワークに接続していないと各テンプレートをダウンロードすることはできません。ただ「空白」に関してはネットワークなしに実行することができます。

図形テンプレートには幾つかのページがあります。実際に試していただくと、色々なページがありますが、今回は最初の二つのページだけ。「キャンバス」と「作成」を見ていきます。

「キャンバス」のページ

二行のプログラムが書かれています。

// circleという変数を宣言して、円形（= Circle）の図形を描画する。
let circle = Circle()

// circleを引きずれるようにする
// drag（引きずる）+ able（できる）= true（できるようにする）
circle.draggable = true

上記のように書かれている。実行すると、「円」が表示されます。そして、引きずる（drag）と、動かすことができます。

「作成」のページ

さて、Playgroundsで描くことができるのは円形だけではありません！もちろん長方形や直線、文字や画像も入れることができます。次のページに行ってみましょう。実行すると６つのオブジェクトが表示されます。今回は簡単な５つまでをご紹介します。

１．円

先程も挙げたCircleで書くことができます。

// 半径（radius）を3にして、円を作る
let circle = Circle(radius: 3)

// 円の中心のy座標を中心から28上にずらす
circle.center.y += 28

ここで新しく出てきたのは「radius」と「circle.center.y」です。

radiusは「半径」という意味で、この「3」という値を大きくしたり小さくしたりすれば円の大きさも大きくなったり小さくなったりします。

また、座標は下記のようになっています。

右の画面の中心を基準にして、上下に「y座標」左右に「x座標」が設定されています。ですので、circleオブジェクトは中心からちょうど28上に動いた位置に配置されています。

２．長方形

長方形のコードは下記のようになっています。

// 四角形（rectangle）を描く。
// 横幅（width）を10に、縦の高さ（height）を5に、
// 角（corner）を丸くするときの半径（Radius）を0.75にする
let rectangle = Rectangle(width: 10, height: 5, cornerRadius: 0.75)

// 長方形の色を紫色（.purple）にする。
rectangle.color = .purple

// 中心から上に18だけ移動
rectangle.center.y += 18

それぞれ上記のように設定がされています。cornerRadiusを「0」にすると、角の半径が0になるので、尖った長方形になります。

３．直線

直線のプログラムは少し長いです。一行一行見てみましょう。

// 直線（Line）を描く
// 線の始まり（start）の点（Point）のx座標を、-10に、y座標を、9に、
// 線の終わり（end）の点（Point）のx座標を、10に、y座標を、9に、
// 線の太さ（thickness）を0.5にする。
let line = Line(start: Point(x: -10, y: 9), end: Point(x: 10, y: 9), thickness: 0.5)

// 直線の中心を下に2ずらす
line.center.y -= 2

// 170度（170×(3.14÷180)radian）直線を回転させる（rotation）
line.rotation = 170 * (Double.pi / 180)

// 直線の色(color）を黄色(.yellow）にする
line.color = .yellow

まず、直線の始まりの点と終わりの点を設定しました。上記のプログラムのステップを書いていくと下記の通りになります。

ということで、ここでは

line.center.y -= 2

とかいてありますが、基準はy座標：9から

下に二つ下がって直線の中心はy座標：7となることがわかります。

４．文字列

文字を入れることもできます。ここでは「文字」と言いましたが、プログラミングではこういったデータとしての文字のことをプログラムと区別して「文字列(string)」というふうに読んでいます。あまり馴染みがない言葉かもしれませんが、書かれているプログラムも文字で混乱のもとになります。

// 文字(Text)を変数（text）に入れて表示させる
// 表示する文字列（string）を"Hello world!"（プログラムでよくある文字列）
// 文字のフォントの大きさ（fontSize）を32ポイントに
// 文字のフォント（fontName）を「Futura」に、
// 文字の色（color）を赤（.red）にする
let text = Text(string: "Hello world!", fontSize: 32.0, fontName: "Futura", color: .red)

// 文字の位置を中心から下に2ずらす
text.center.y -= 2

上記のプログラムを見ていくといろいろなところを変えられることがわかります。

例えば、stringの中身を変えれば「表示する文字列」が変わる。

fontSizeを変えれば「文字の大きさ」が変わる。

fontNameを変えれば「文字のスタイル」が変わる。

colorを変えれば「文字の色」が変わる。

といった具合に、操作することができます。

５．画像を表示する

画像は、上の「＋」ボタンから追加することができます。

フォトライブラリもしくは写真を撮影し、入れることができます。

では、プログラムを見ていきましょう。

// 画像（Image）をを表示する
// ファイル名（name）は"SwiftBird"
// 画像の色合い（tint）は緑色（.green）にする。
let image = Image(name: "SwiftBird", tint: .green)

// 画像（image）の横幅（width）のサイズ（size）を、元の画像のサイズの半分（0.5倍）にする。
image.size.width *= 0.5

// 画像（image）の縦の高さ（height）のサイズ（size）を、元の画像のサイズの半分（0.5倍）にする。
image.size.height *= 0.5

// 画像の中心をy座標の中心から下に11ずらす。
image.center.y -= 11

色合いの設定をすると、もともと黒い画像を緑色に変更できます。

また、今回出てきたのはsize.widthとsize.heightですね。それぞれを設定すれば大きさを変えることができます。

さて、今までのプログラム全体を見ていくと共通点が見えてくるはずです。

共通するプログラムの書き方

１．変数を宣言して、そこに描きたい図形を入れるだけで表示される。

例えば、円形だったらlet circle = Circle()というように、変数を宣言して、そこにCircle, Rectangle, Line, Text, Imageの５種類のどれかを入れるだけで、表示されます。「表示する」という命令がないのですこしややこしいのですが、簡単にできることだけ覚えておくと良いでしょう。

２．最初の位置はy座標もx座標もともに「0」で、中心。そこからcenterでずらす

図形を入れた変数には"center"というオプション（追加機能）がつきます。そのcenterには、さらに"x"と"y"というオプションがさらについていて、それぞれを変えると、図形の中心を動かすことができます。

もともとの位置からy座標なり、x座標なりを増やしたいときには"+="（設定の数から足す、という意味）という記号をつかって、

circle.center.x += 10

のように、減らしたいときには"-="（設定の数から減らす、という意味）という記号を使って

rectangle.center.y -= 10

のようにすればよいでしょう。

３．CircleやRectangleなどそれぞれで設定するものが違う

例えば、Circleだったら「radius（半径）」を、Rectangleだったら「width（横幅）」、「height（縦の高さ）」を設定する必要があります。

それぞれで形が違うからこそ、設定する内容も異なります。

「これって覚えなくちゃいけないの？」というふうに思うかもしれません。実はCircleやRectangleなどのもととなる図形の名前を知っていなければいけませんが（もしくは検索しないといけないのですが）、

何を設定するかを簡単に知ることはできます。キーボードの上にある「予測」を使うと簡単です。設定が多いLineのとき、どうなるか見てみましょう。

ステップ１："L" を入力（だいたい最初の文字を入れると候補が出ます。）

ステップ２："(" を押す（オプションを出す）

ステップ３：オプションの候補を出して選ぶ。

ステップ４：オプションの候補を選んで、オプションを決める。

便利なことに、それぞれのオプションを入れるだけでよいのです！

図形も簡単に描けてしまう、Swift Playgrounds、タッチイベントなども追加することができるので、ゲームも簡単に作れる上に、左のプログラムとの対応づけもできます。

幅広い可能性を感じますね！！