2022年5月14日土曜日

YogaKitSample を利用して、YogaDocsを調査

yogalayout docs

Absolute/Relative Layout

要素の位置の種類は、その要素が親要素の中でどのように配置されるかを定義します。
RELATIVE(DEFAULT) デフォルトでは、要素は相対的に配置されます。
つまり、要素はレイアウトの通常の流れに従って配置され、top、right、bottom、leftの値に基づいて、その位置から相対的にオフセットされます。
このオフセットは、兄弟や親要素の位置には影響しない。
ABSOLUTE 絶対位置の場合、要素は通常のレイアウトフローに参加しない。
代わりに兄弟要素から独立してレイアウトされる。
位置はtop, right, bottom, leftの値に基づいて決定される。

Flex Direction

Flex 方向は、ノードの子ノードがレイアウトされる方向を制御します。
これは、主軸とも呼ばれます。主軸は、子ノードがレイアウトされる方向です。
十字軸は、主軸に垂直な軸、つまり折り返し線がレイアウトされる軸を指します。

ROW (DEFAULT) 子を左から右へ並べます。折り返しが有効な場合、次の行はコンテナの左側の最初の項目の下から始まる。

COLUMN 上から下へ並べる。折り返しが有効な場合、次の行は、コンテナの左上の最初の項目から開始される。

ROW REVERSE 子要素を右から左へ並べる。折り返しが有効な場合、次の行はコンテナの右側の最初の項目の下から始まる。

COLUMN REVERSE 子要素を下から上へ並べる。折り返しが有効な場合、次の行はコンテナの底にある最初の項目の左側から始まる。

Align Self

align selfはalign itemsと同じオプションと効果を持ちますが、
コンテナ内の子に影響を与えるのではなく、
このプロパティを1つの子に適用して、その親内での配置を変更することができます。

Width and Height

Yogaのwidthプロパティは、要素の内容領域の幅を指定します。同様に height プロパティは、要素のコンテンツ領域の高さを指定します。
widthとheightはどちらも以下の値をとります。
AUTO デフォルト値で、他の子要素、テキスト、画像など、要素のコンテンツに基づいて幅と高さを計算します。
PIXELS 絶対ピクセルで幅/高さを定義します。YOGA ノードに設定された他のプロパティによって、これがノードの最終的な寸法になることも、ならないこともあります。
PERCENTAGE 親の幅と高さに対する割合で、幅と高さを定義します。

FLEX GROW

コンテナ内のスペースが、主軸に沿ってどのように子に分配されるべきかを説明します。
コンテナは、その子をレイアウトした後、その子によって指定されたフレックスグロウ値に従って、残りのスペースを分配します。
Flex grow は、任意の浮動小数点値 >= 0 を受け入れ、0 がデフォルト値です。
コンテナは、その子のフレックス・グロウ値によって重み付けされた残りのスペースを、その子の間に分配します。
FLEX GROW は、コンテナ内のスペースが、主軸に沿ってどのようにその子たちに分配されるべきかを説明します。コンテナは、その子をレイアウトした
後、その子によって指定されたフレックスグロウ値に従って、残りのスペースを分配します。

Justify Content

Justifyコンテンツは、コンテナの主軸内に子要素を配置する方法を記述します。例えば、このプロパティを使用して、フレックス方向を行に設定したコンテナ内で子を水平に、またはフレックス方向を列に設定したコンテナ内で子を垂直にセンタリングすることができます。

FLEX START(DEFAULT) コンテナの子を、コンテナの主軸の始点に揃える。

FLEX END コンテナの子要素をコンテナの主軸の終点に揃える。

CENTER コンテナの子をコンテナの主軸の中心に並べる。

SPACE BETWEEN コンテナの主軸を横切る子のスペースを均等にし、子同士の残りのスペースを分散させる。

SPACE AROUND コンテナの主軸を横切る子供のスペースを均等にし、子供の周りに残りのスペースを配分します。スペースアラウンドを使用すると、スペースが最初の子の先頭と最後の子の末尾に分散されます。

SPACE EVENLY アライメントコンテナの中で、主軸に沿って均等に配置される。隣接するアイテムの各ペア、メイン開始端と最初のアイテム、メイン終了端と最後のアイテムの間隔は、すべて正確に同じになる。

2022年5月5日木曜日

gitメモ

zshでgitを快適に使いやすくするためのターミナル設定(zsh編)

あなたはmerge派?rebase派?綺麗なGitログで実感したメリット

指定したコミットやログ履歴を参照する方法

Gitのコミットメッセージを後から変更する方法をわかりやすく書いてみた


コミットの流れを一覧で確認

git log --oneline --graph


Push

git push -u origin [リモートへ上げたいローカルブランチ名]


複数のコミットを1つにまとめる

git rebase -i HEAD~[まとめる数]

例) 3つのコミットを1つにまとめる

git rebase -i HEAD~3

1つ目以外をpick から fixupに変更する

コミットメッセージを修正

git commit --amend -m "メッセージ"

rebaseの取り消し

git rebase --abort


gitでaddとcommitを同時に実行する

git commit -am "comment"


2022年5月3日火曜日

Xcode13からRXSwiftをCarthageで入れる

  • XCode 13.2.1
  • MacOS Bigsur 11.6.3
  • carthage 0.38.0

carthage コマンドを実行するまでの初期導入の準備が終わったら

以下のコマンドを実行します。(完了までに少し時間がかかります)

carthage update --use-xcframeworks --platform iOS

完了し成功すると、RxSwift等のxcframeworkが出来上がります


続いて、XcodeのTARGETS内の[アプリ名]を選択

上部のGeneralを選択

General内のFramworks, Libraries, and Embedded Contentを選択

+ボタンをタップし、Add Other > Add Filesを選択

先程、作成されたxcframeworkを選択

これで、RxSwiftをコード内で使用しビルドを行う事が出来ました


しかし、エミュレーターからの実行時に以下のようなエラーが出ました

Library not loaded: @rpath/libXCTestSwiftSupport.dylib


これを解消する為には

XcodeのTARGETS内の[アプリ名]を選択

上部のGeneralを選択

General内のFramworks, Libraries, and Embedded Contentを選択

RxBlockingとRxTestのフレームワークを消す


これで実行時のエラーも無くなりました


参考サイト

XCFrameworksに対応したCarthageを使ってみた

[iOS][Xcode] error: Building for iOS Simulator, but the linked framework ‘Hoge.framework’ was built for iOS.というエラーが出たときの対処法

【RxSwift】RxBlockingとRxTestはテストのフレームワークだからCarthage入れる時は注意しよう!


2014年9月27日土曜日

XCodeを複数入れる方法

複数のXCodeを使って運用したい時の方法です。

試した環境
・Mac OS X 10.9.5
・Command Linde Tools 5.0(6.0にアップデートしていません)
・既にXCode5が入っている

iOS Dev CenterからDownloadsの
「Looking for an older version of XCode?」をクリックし、
XCode6のdmgファイルをインストールします



dmgファイルをインストール後、Xcodeのファイル名をfinderからリネームします



今のところ、XCode5/6プロジェクトファイルの起動ビルド共に正常に
実行できます


2014年8月7日木曜日

Adobe AIR 15 Beta スプライトパフォーマンス検証

Adobe LabsでAIR15Betaが公開されました。
(リンク先へ)

1年程前に150個のスプライトアニメーションをNexus7(2012)で
表示するテストを行いました。


fpsは43程度でていました。

AIR15Beta + TEGRANOTE 7 + StarlingFramework 1.5.1を使用して同じ条件で
表示するテストを行いました。

fpsは60ほぼをキープしていました。ハードウェア性能の進化とAIRの進化には
まだまだ期待できると思います。

AIR15ではOpenGL ES3.0に対応するという事でさらに高速なグラフィックを表現する事にも期待できます。

追記

iPodTouch(第5世代) iOS7で上記と同じ条件で動作させてみました。
fpsは30を下回りました。モードはipa-app-store(アプリをリリースする状態)で
パッケージを行っています。






2014年3月16日日曜日

Tegra Note7の動作パフォーマンス

Zotac Tegra Note7でアプリのパフォーマンス調査として、動画を作成しました。
この端末は2013年12月頃発売したAndroidタブレットで、Tegra 4プロセッサ
搭載しています。

パズ億 〜世界一周編〜
Adobe AIRで開発されているという事で、動作を試してみました。
とても動作が軽く、完成度の高いアプリです。
アプリの開発を行ったICS社の記事 (リンク先へ)


WebGL Aquarium
ブラウザのWebGLを利用したデモで、魚の数が500匹で30fps程度出ていました。
今後のWebGLを利用したブラウザアプリも期待ができます。



Magic&Dungeon
私が個人でリリースしたAdobe AIRのアクションゲームです。
このゲームの開発を行った頃は、Nexus7(2012)等で動作テストをしていました。
その頃よりも動作パフォーマンスは上がったと思います。

2014年1月11日土曜日

AIR 4 BetaでiOSのビルド時間を計測しました

AIR 4 BetaのSDKを利用し、iOSへのビルドを行ってみました。


Download Adobe AIR (リンク先へ)

Flash Player 12 ベータと AIR 4 ベータの更新情報(リンク先へ)


ビルドを行ったマシンスペック
  • MacOS X 10.7.5
  • 2.7GHz Intel Core i7
  • メモリ8GB

以前作った簡単なパズルゲームのビルドを行ってみました。
ipaファイルになった時のファイルサイズは、3,819,255バイトです。

ビルド時の引数は
-target ipa-app-store
を指定しています。

今までかかっていたビルド時間を計測してみました。
AIR 4 Betaから導入された引数
 -useLegacyAOT no
を入れて、ビルドを行ってみると


かなり改善されました。
これは、今後期待のできる結果が出たのではと思います。

2014年1月8日水曜日

Adobe AIR 4.0とGAF Converter

Flash PlayerとAIR「Irving」および「Jones」
2つの次期バージョンのリリースをそれぞれ2013年後半と2014年前半に
予定しています。

Flashランタイムのロードマップ (リンク先へ)

主な機能
  • デスクトップFlash PlayerおよびAIRのOSX Mavericksのサポート
  • iOSのパッケージ時間の大幅な削減
  • モバイルでのActionScriptの同時使用(ベータ版)
  • iOS 7のサポート(Appleのスケジュールによる)
  • Windows 8.1 PlayToのサポート
  • Windows 8.1のタブの扱いの改良
  • Windows Internet Explorer 11のバックナビゲーションキャッシュのサポート
  • AIR AndroidでのXXHDPIアイコンのサポート
  • Mac OS Xにpkgインストーラーをバンドル(現在は.dmg)
  • Android 4.4 (KitKat)への対応

この中でも特に注目しているのは
  • iOSのパッケージ時間の大幅な削減
です。現在、iOSでビルドを行うと早くても数十秒かかります。
企業でリリースするようなボリュームのあるアプリを作成した場合は、数分という単位に
なってしまう可能性があります。これは、開発作業の中で大きなボトルネックになるでしょう。


もう1つ注目している技術で、GAF Converterというものがあります。
これは、FlashアニメーションをStarling Frameworkで利用できるという事で
ソーシャルゲームの演出を作成する時に効果を発揮すると思います。
gafmedia.com (リンク先へ)

最近ではFlash/AIRの最新情報が少ない事や、企業でFlash/AIRを採用する事が少なくなってしまった為、私自身も距離を置いていますが、2014年以降もFlash/AIR共にアップデートを続けていきます。

Flash/AIRでの開発案件のご相談をお受け致します。
Twitterアカウント (リンク先へ)
E-Mail連絡先 (リンク先へ)

2013年7月24日水曜日

DragonBones 入門

DragonBones 概要とインストール(リンク先へ)
動作環境やインストールまでの手順を記載しました。

DragonBones サンプルを使ってみる(リンク先へ)
DragonBones_Tutorial_Assets/DragonBones_tutorial_Start.flaより
データをインポートし、利用方法までを記載しました。

DragonBones アニメーションデータを利用する(リンク先へ)
FlashBuilderライブラリプロジェクトサンプルプログラムを使って
利用しました。テクスチャの切り替え方法も記載しました。

DragonBones アニメーションデータを利用する

FlashBuilderを利用してソースコード上からDragonBonesのデータを利用します。
ライブラリプロジェクトファイルの作成

プロジェクトファイル内にサンプルコードを入れる

DragonBonesライブラリプロジェクトの作成と、サンプルを試す為のプロジェクトファイルを作成します。

ライブラリは、DragonBones2.2SkeletonAnimationLibraryから
サンプルプロジェクトは、DragonBones_Tutorial_AssetsCodeより取り込みました。


サンプルプロジェクトのビルドに成功すると、歩行しながらアニメーションしたり、ジャンプするドラゴンの操作ができます。


テクスチャの切り替え
次にドラゴンの着ている服任意の操作やタイミング切り替えると言う処理を行なってみます。

サンプルDragonBones_Tutorial_ChangeClothes.flaより、服がレイヤーに追加されています。
変更したい服をライブラリ内のpartsclothes1からclothes4まで追加します。

では、DBStarlingClothes.asから実際に切り替え処理を行う方法を見てましょう。

private var textures:Array = ["parts/clothes1","parts/clothes2","parts/clothes3","parts/clothes4"];
ライブラリの階層と同じように、clothesの配列を作成します。
var _textureName:String = textures[textureIndex];
var _image:Image = factory.getTextureDisplay(_textureName) as Image; 
StarlingFactoryクラスgetTextureDisplayを利用する事で指定のテクスチャを取得します。

var _texture:Texture = assetManager.getTexture("clothes"+(textureIndex+1).toString());
var _image:Image = new Image( _texture );
また、flaファイルを利用せず外部テクスチャを利用する方法としてAssetManagerからTextureを利用する事が可能です。