私の個人アプリを作る流れを全部見せます その10：UndoとRedo

本企画の全記事はこちらから

今回はUndoとRedoの機能をつけます。

私の個人アプリを作る流れを全部見せます その9：再始動（色選択の実装）

本企画の全記事はこちらから

前回の記事から1ヶ月以上も空いてしまいました。

個人開発の一番の敵、それは技術的なハードルなどではなく「飽き」だと思います。 飽きを克服するのは簡単ではありませんが、以下の記事がヒントになります。

ほぼ日刊イトイ新聞-脳の気持ちになって考えてみてください。 〜「やる気」と「脳」の話を、池谷裕二さんと。〜

「やりはじめないと、やる気は出ません。脳の側坐核が活動するとやる気が出るのですが、側坐核は、何かをやりはじめないと活動しないので。」

つまり、無理矢理でも再開しちゃえば、やる気になってくれるかもしれないということですね。 ということで、今回はドット絵を描く色の選択機能をなんとか実装していきます。

私の個人アプリを作る流れを全部見せます その8：グリッド表示

本企画の全記事はこちらから

今回も編集画面を触っていきます。

グリッド線（マス目）を表示できるようにしましょう。

EditorViewでグリッド表示

isGridというフラグを追加して、それがtrueの場合にグリッドを描画するようにします。

var isGrid = false {
    didSet {
        setNeedsDisplay()
    }
}

didSetについては「Swift 4プログラミング入門」の「9.3 メンバー」で説明しています。

描画ロジックは簡単で、1〜31までループを回してそこに線を引いていくだけです。

私の個人アプリを作る流れを全部見せます その7：1色のドット絵

本企画の全記事はこちらから

いよいよドット絵を描けるようにします。（まだ1色だけですが）

今回の内容は、「Swift 4プログラミング入門」の15章の内容を使って実装できます。

カスタムビュー

EditViewControllerのビューをEditorViewというカスタムクラスを使うように設定します。 このクラスにドット絵を描く機能を持たせていきます。

データの持ち方

Pixel Art Pocketでは32×32のドット絵をサポートすることにします。

データはドット数分の配列を用意して、そこにUIColorで色情報を持たせます。後から変えるかもしれませんが。

こんな感じで透明で初期化しています。

// 32×32ドットとする
static let dotsPerRow: CGFloat = 32.0
// ドット数分の配列を用意
var dots = Array(repeating: UIColor.clear, count: Int(dotsPerRow * dotsPerRow)) 

描画機能

EditorViewのtouchesMoved(_:with)でタップした位置から、配列の該当箇所を計算し、そこに色を入れます。

本来は選択した色を使いますが、ここでは黒で決め打ちしています。

私の個人アプリを作る流れを全部見せます その6：編集画面編

本企画の全記事はこちらから

今回は仮の編集画面を作ります。

一覧から編集画面への遷移

Storyboardから編集画面用のコントローラーを追加します。 そして、EditViewControllerというUIViewControllerのサブクラスを作り、このクラスを使うように設定します。

さらに、一覧からセグエをつなぎます。 セグエにはeditと名前を付けておきます。

このセグエをIndexViewControllerのtableView(_:didSelectRowAt:)から呼び出して画面遷移させます。
※ この動きは仮で最終的にはアクションシートが表示される予定。

この辺りの手順は「Swift 4プログラミング入門」のSection 13.2「画面遷移」や13.8「テーブルビューを簡単に使う」が参考になります。

これで、一覧のアイテムをタップすると真っ白な画面に遷移するようになりました。

編集画面のUIを作る

以下のようにして編集画面を作っていきます。

1. Viewに背景色を付ける
2. 幅・高さ300のサブビューを中央に置く
3. ツールバーにボタンを置く（いずれアイコンにする）

2.は14章のオートレイアウトを参考に作業すれば簡単です。

こんな感じになりました。

プロジェクトは以下のリンクからダウンロードできます。

https://github.com/tnantoka/PixelArtPocket/releases/tag/my-app-dev-flow-6

次回は、ドット絵を描く機能を作り始めます。