Dart x Flutter で、iOSアプリを作成してみた。


Dart x Flutter を利用してiOSアプリを作成してみました。alphaブランチのversion 0.21 では、サポートされていませんが、
開発ブランチ(master)の version 0.21 では　ワンコマンドで、ios用のXcode用のプロジェクトを生成する機能がついています。

実際に、この機能を利用してミニゲームを作成しました。
本文では、実際に Html5、Android、iOSで動作させてみます。

# Dart x Flutter は楽しい
### Dart x Flutter は、起動が早い
DartVMを利用して動作します。(※iOSはAOT)
なので、Chromeモバイル x WebViewベースのマルチプラットフォーム開発環境と比較して起動が早いです。

### Dart x Flutter は、処理速度が早い
DartVMを利用して動作します。(※iOSはAOT)
なので、Chromeモバイル x WebViewベースのマルチプラットフォーム開発環境と比較して処理速度が早いです。

ブラウザーで作成したものを、モバイル端末用に移植する場合、パフォーマンスの問題がててきますが、
Dart x Flutter は吸収してくれます。

### Dart x Flutter の開発環境は軽量でスイスイ
ATOMが推奨されています。Android Studioが重くて動作しないといった方でも、軽快に開発できます。

<br>
<br>

# Html5, Android ,iOS　で動作するアプリを作成してみた
試してみた事です。Matrial Designのアプリを作成できるというのが特徴ですが、ゲームを動作させるのにも使えます。

### Minoを動作させてみた。
![Screen Shot 2015-12-21 at 14.08.11.png](https://qiita-image-store.s3.amazonaws.com/0/54192/ce003067-99cb-a05c-c5ab-73280f372b7b.png)

古典的なゲームを作成してみました。

* Html5
http://kyorohiro.github.io/umiuni2d/web/demo/wonderminon/main.html

* Google Play
https://play.google.com/store/apps/details?id=info.kyorohiro.umiuni2d.demo.mino

* Android & iOS版ソース https://github.com/kyorohiro/doc_2dgame/tree/master/demo/mino



### Physicsを動作させてみた
![about.png](https://qiita-image-store.s3.amazonaws.com/0/54192/41efb46a-97da-531e-cf57-430240d2bde9.png)

自作簡易のPhysicsです。適当なコードで書いても、快適に動作することを確認。

* Html5
http://kyorohiro.github.io/umiuni2d/web/example/physics_test/main.html

* Android & iOS版ソース
https://github.com/kyorohiro/doc_2dgame/tree/master/example/physicsTest

<br>

### 3Dを動作させてみた
![3ddemo.png](https://qiita-image-store.s3.amazonaws.com/0/54192/b7c41bc6-9b8f-b214-8d77-26c9db8058ce.png)

OpenGLのインターフェイスはまだありません。FlutterのベースになっているMojoではOpenGLが動作しているので、個人的には期待しています。

drawVertexがサポートされていますので、ロウポリ的なものは作れます。



* Android & iOS版ソース https://kyorohiro.gitbooks.io/hello_skyengine/content/draw_vertices_demo/doc/index.html



# iOSアプリを作成してみよう。
```
## Dart SDKのインストール
brew tap dart-lang/dart && brew install dart --devel

## Flutter のインストール
git clone https://github.com/flutter/flutter.git
emacs ~/.bash_profile
export PATH=`pwd`/flutter/bin:$PATH
source ~/.bash_profile

## Minoデモをダウンロード
git clone https://github.com/kyorohiro/doc_2dgame.git
cd ../doc_2dgame/demo/mino

## アプリが依存するパッケージをインストール
pub get
pub upgrade

## Xcode プロジェクト生成
flutter ios --init

## packaging app
flutter build
cp ./build/app.flx ./ios

## ios配下のXCodeプロジェクトをビルドすると端末上で動作するアプリを生成できます。
```

できましたか? XCodeからRunするとアイコンが追加されます!!
![Screen Shot 2015-12-21 at 15.05.14.png](https://qiita-image-store.s3.amazonaws.com/0/54192/66ca2e90-0405-3e02-9678-3b212ad80478.png)

<br>
<br>

# Androidアプリを作成してみよう。
```
## Dart SDKのインストール
brew tap dart-lang/dart && brew install dart --devel

## Flutter のインストール
git clone https://github.com/flutter/flutter.git
emacs ~/.bash_profile
export PATH=`pwd`/flutter/bin:$PATH
source ~/.bash_profile

## Androidの設定
brew install android-sdk
emacs ~/.bash_profile
export ANDROID_HOME=/usr/local/opt/android-sdk
source ~/.bash_profile


## Minoデモをダウンロード
git clone https://github.com/kyorohiro/doc_2dgame.git
cd ../doc_2dgame/demo/mino

## アプリが依存するパッケージをインストール
pub get
pub upgrade

## Xcode プロジェクト生成
flutter apk

```

前回と同じです。
http://qiita.com/kyorohiro/items/5981590797facb027725

<br>
<br>

# ほそく
#### 公式
http://flutter.io/
https://dart-atom.github.io/dartlang/

#### Memo : Flutter x Dart 
kyorohiroがFlutterについて、学習した事を記載しているメモ
https://kyorohiro.gitbooks.io/hello_skyengine

#### Umiuni2D
http://kyorohiro.github.io/umiuni2d/web/index.html
https://github.com/kyorohiro/doc_2dgame


#### QiitaのFlutter 関連の記事
http://qiita.com/tags/Flutter


<br>
<br>

# Thanks!

![umiuni2d_demo_2.png](https://qiita-image-store.s3.amazonaws.com/0/54192/7f222229-4b76-657d-11b4-3c1ff588eb15.png)

最後まで、読んでいただきまして、ありがとうございました。
(ref http://pixiv.me/kyorohiro)
(ref https://play.google.com/store/apps/details?id=info.kyorohiro.umiuni2d.demo.mino)

<br>
<br>
-------
Kyorohiro Work
http://kyorohiro.strikingly.com/