はじめてみよう。プログラミング！ - Swift Playgroundsでアニメーション。

プログラミングの楽しさはコードを書くということだけではなくて、実際に絵が動いたりするとなんだかいい感じに思えます。Swift Playgroundsを使うと比較的簡単に"動く"プログラミングができるので楽しくなリます。

アップルの無償プログラミング学習ツール「Swift Playgrounds」アニメーションを動かそう (3/5)

早速参考サイトのコード書いて実行してみましょう。テンプレートは「図形」を使っています。このテンプレートの中にいろんなクラスが作ってあるのでこれを使わないと、使えない機能があるので注意が必要です。

まず基本的な"円"を書いて色を指定します。

import Foundation

Canvas.shared.color = .white  // 背景の色

let circle = Circle(radius: 4.0)　// 半径4.0の円

circle.color = #colorLiteral(red: 0.9372549019607843, green: 0.34901960784313724, blue: 0.19215686274509805, alpha: 1.0)　// 色の指定

次に触ったところの座標を取得して円を動かします。

circle.onTouchUp {
   animate {
       circle.center = Point(x:circle.center.x ,y:circle.center.y)
   }
}　// 円を移動します。


Canvas.shared.onTouchUp {
   circle.center = Canvas.shared.currentTouchPoints[0]　//  触ったところの円の座標を取得
}

全体のコードです。

import Foundation

Canvas.shared.color = .white

let circle = Circle(radius: 4.0)

circle.color = #colorLiteral(red: 0.9372549019607843, green: 0.34901960784313724, blue: 0.19215686274509805, alpha: 1.0)

circle.onTouchUp {
   animate {
       circle.center = Point(x:circle.center.x ,y:circle.center.y)
}
Canvas.shared.onTouchUp {
   circle.center = Canvas.shared.currentTouchPoints[0]
}

実行すると

"円"の次は"棒"を動かしてみましょう。

Canvas.shared.color = .white

let line = Line(start: Point(x:-10,y:0), end: Point(x:10,y:0))

line.color = #colorLiteral(red: 0.9254901960784314, green: 0.23529411764705882, blue: 0.10196078431372549, alpha: 1.0)

let timer = Timer.scheduledTimer(withTimeInterval: 1, repeats: true, block: { _ in
line.rotation += 1})

円を動かした時との違いは

let timer = Timer.scheduledTimer(withTimeInterval: 1, repeats: true, block: { _ in
line.rotation += 1})

タイマーを使っているところです。これを使うとある間隔

withTimeInterval: 1　// この場合は”1”秒

で動き続きます。

次にボールを動かして、条件によってボールの方向を変えてみます。

まず、変数で条件となる数字を定義していきます。

Canvas.shared.color = .white

let witdth = 90.0　// ゲーム画面広さ
let height = 76.8　// ゲーム画面高さ

var ballrad = 2.0　// 半径

var valx = 2.0  // 動く距離
var valy = 2.0

let ball = Circle(radius: ballrad)
ball.center.x = 0
ball.center.y = 0

let witdth = 90.0　// ゲーム画面広さ
let height = 76.8　// ゲーム画面高さ

の中で動くようにします。これを出る場合は跳ね返るような仕組みにします。

そしてボールを作るコードです。半径が変数 ballradの円形を作り、初期の座標を(0,0)としています。

let ball = Circle(radius: ballrad)
ball.center.x = 0
ball.center.y = 0

次にボールを動かすコードです。

let timer = Timer.scheduledTimer(withTimeInterval: 0.05, repeats: true, block: { _ in
   ball.center.x += valx
   ball.center.y += valy
   
   if abs(ball.center.x) > witdth/2 - ballrad{
       valx *= -1
   }
   
   if abs(ball.center.y) > witdth/2 - ballrad{
       valy *= -1
   }

座標を動かす仕組みです。

ball.center.x += valx
ball.center.y += valy

ボールのx座標、y座標を0.05秒(withTimeInterval: 0.05)ごとに valxとvalyずつ動かします。これでボールの動きが出ます。

範囲外に出た時は逆方向に方向を向けることで跳ね返る仕組みを作っています。

if abs(ball.center.x) > witdth/2 - ballrad{
　　valx *= -1
}

if abs(ball.center.y) > witdth/2 - ballrad{
　　valy *= -1
}

少しわかりにくいのでイラストで考えます。

ボールの中心座標で考えることが必要なので、例えば、ボールのx座標は

ball.center.x

ボーの円周が外に出る座標を考えると、今わかっているのは中心座標なのでが中心座標がwitdth/2から円の半径分を引いた座標にある場合に円周が端にあるということになるので以下の式が出来上がります。

witdth/2 - ballrad

その範囲を超える場合は動く方向を

valx *= -1

"-1"とすることで反対方向へと変更します。これで跳ね返ったように動作するようになります。

全体のコードです

Canvas.shared.color = .white

let witdth = 90.0
let height = 76.8

var ballrad = 2.0

var valx = 2.0
var valy = 2.0

let ball = Circle(radius: ballrad)
ball.center.x = 0
ball.center.y = 0

let timer = Timer.scheduledTimer(withTimeInterval: 0.05, repeats: true, block: { _ in
   ball.center.x += valx
   ball.center.y += valy
   
   if abs(ball.center.x) > witdth/2 - ballrad{
       valx *= -1
   }
   
   if abs(ball.center.y) > witdth/2 - ballrad{
       valy *= -1
   }