darjjeelling apps website


Category Archive

The following is a list of all entries from the アプリ開発 category.

Unityで画像の数字を描画する方法

Unity2Dでゲームスコアなどに使う数字を、フォントではなく自作の画像で置き換えて表示したくなった時のやり方を調べていました。
その過程で、2D用にSpriteで表示できるやつを作ってみたのでGitHubに公開します。

https://github.com/darjjeelling/imagenumber

Unityで表示するとこんな感じです。

splash

上のように自分の好きに作ったオブジェクト枠内に、フォントではなく画像にしてある数字を表示してくれます。
また図中の上段の数字が上位桁を0埋めした場合、下段の数字が0埋めを表示しない場合です。この切り替えもできます。

呼び出し側のコードはこんな感じの2、3行でOK

使い方・基本編

0. GitHubからプロジェクト一式をダウンロードします

1. 以下のファイルを自分のプロジェクトのAssets内にコピーします
– NumberImageRenderer
– SampleScript
– Resources以下のファイル
2. HierarchyでCreate->Create Emptyで生成したオブジェクトにRect TransformをAdd Componentします
3. さらにNumberImageRenderer, SampleScriptの2つのスクリプトを追加します
4. Inspector上でNumberImageRenderer(Script)で以下のように指定します
– File Name : img123456789
– Parent Transform :
5. プロジェクトを実行します。2.で作成したオブジェクト内に数字が表示されます。

使い方・応用編

  • 数字表示の呼び出し側はSampleScript.csを参考に、ご自分のスクリプト内に書いてもいいです。
  • 最大桁数を指定するとその桁数になるよう0で埋めて表示されます。
    ex) ni.maxDigit = 9;
  • 最大桁数を指定した上でInspectorのIgnore Filled Zeroのチェックをオンにすると、0が表示されなくなります
    Ignorezero
  • 数字の幅と高さは2.で作成したオブジェクトのサイズに自動的に変換します。なので、例えば最大4桁の幅で表示したくてオブジェクトの幅を決めても、入力数値が3桁だったら横に伸びた表示になります。それを抑えたい時にも最大桁数を指定してください。
  • 数字の画像を入れ替えたい場合は、Asset下のimg0123456789を別のものにしてください。
    以下のように数字を横長に並べた画像を用意し、SpriteEditorを使って分割します。
    numberimage012.png
    各数字のSprite名はhogehoge_1,hogehoge_2,…のように末尾に対応する数字をつけてください。
  • 数字は正の整数のみ。桁区切りにも未対応です。

それではよろしければご利用ください。

広告

Xamarin Studio for Macでアプリを作ってストア公開してみた5

(2016/9)
(この記事は、Xamarin for Macでアプリを作ってストア公開してみた4 のつづき。最終回です)

ic_launcherテスト

さて、前回までで鏡アプリとして作りたい機能の実装はすべてできました。
これでバンザーイ!終了!!♪(=゚ω゚)ノと言いたいところですが、まだまだやることは残っています。
まずは、テストですね。

一般にはテストコードを書いて実行、といくかと思いますが、このアプリではカメラを使った機能がほぼすべてですので、すべて手動で動作チェックします。
#テストコードの書き方の解説を期待してた方はすみません。

テストの内容としては、
・ボタンを押して左右反転が切り替わるか?
・ボタンを押して明るさ、ズームが変化するか?
・タップして画面が停止するか、もう一度タップして再開するか?
と、これまで実装してきた通りに動作しているか実機を使ってテストしましょう。

ちなみに、クラウド上で数百台の端末でテストできる環境もXamarinには用意されているみたいですね
有償ですが試すのもいいかもしれません
Xamarin Test Cloud
https://www.xlsoft.com/jp/products/xamarin/test-cloud.html
まずは評価版でお試しもできるみたいです。
こちらのベージが分かりやすいです。ぜひ参考にしましょう!
http://ytabuchi.hatenablog.com/entry/2016/06/23/133412

ic_launcherGoogle Playストア公開

さてテストが終わったら、Google Playストアへの公開の手続きのための準備をしていきます。
やり方は、、、、こちら!

https://www.xlsoft.com/jp/products/xamarin/publish_android.html

こちらが詳しくてわかりやすいです。
よく読んでその通りやりましょう!!

以上。(笑)

とまた他人任せですが、少しトピック的に追加話をしてみます。
でも、上のページもちゃんと読んでくださいね(笑

アイコンの準備

Continue reading this entry »


Xamarin Studio for Macでアプリを作ってストア公開してみた4

(2016/9)
(この記事は、Xamarin for Macでアプリを作ってストア公開してみた3 のつづきです)

ic_launcher明るさ変更機能の追加

前回ではズーム表示の機能を作りましたが、今回は画面の明るさを変更できる機能を追加してみましょう。

と、説明に入る前にいきなり余談ですが。
実はここは最大の鬼門でした。この機能をどうコーディングするかが分からずに1日くらい無駄にしてしまいました。

Androidでスマホの画面の明るさを指定するには、こんな感じで書けばいいですよね。

LayoutParameterクラスnewしてscreenBrightnessに好きな明るさの値を入れて、あとはgetWindow()でとったWindowにセットしてやります。

なので、これに対応するAPIを公式ドキュメントで探してみるわけです。
Android/iOS API互換100%をうたうXamarinですから、あるはずですよ!
そして近いのを見つけました。
これ↓
https://developer.xamarin.com/api/type/Android.Views.WindowManagerLayoutParams/
このWindowManagerLayoutParamsを使ってgetWindow()に対して指定してやればいいはず。
が、しかし、、、

getWindow()に対応するAPIがない!( ;´Д`)

なんじゃこりゃあ?絶対あるはずだ〜?でも検索に引っかからない、サンプルコードにもないし!?
Continue reading this entry »


Xamarin Studio for Macでアプリを作ってストア公開してみた3

(2016/9)
(この記事は、Xamarin Studio for Macでアプリを作ってストア公開してみた2 のつづきです)

ic_launcher「相手から見たモード」機能の追加

さて前回、インカメラからの映像を画面上に表示させるところまでやりました。
ここにもう少し鏡アプリらしい機能を追加していきましょう。

ち、な、み、に、

みなさん鏡アプリって使ったことありますか?
昔から数多く出ていますが、その中でも特に日本製アプリでよく見かける機能があるんですが、なにか分かりますか?

そう、「相手から見たモード」です!

普通にインカメラに映る自分の姿は、鏡を見ているのと同じ左右状態になっています。
これを左右反転して表示させると、相手から見た自分の姿が見える。(例えば、相手から見て左側は自分から見て右側)
これが相手から見たモード。この機能を追加していきましょう。

まずMirrorController.csファイルを新規追加します。
後でこのクラスを呼び出す関係でSingletonにします。
C#ではこんな感じで書けばいいようですね。

続いてこのクラス内に、現在どちらのモード(相手から見たモード?通常の鏡モード?)かを保存するフラグmMirrorFlipと、それを返す関数GetMirrorFlip()を用意します。
さらに、後でボタンを用意しますので、ボタンを1回押すごとにフラグを反転させるトグルスイッチの役目になる関数ToggleMirrorFlip()も追加します。
その結果がこちら。

ここまでできたら、画面にボタンを追加していきましょう。
Continue reading this entry »


Xamarin Studio for Macでアプリを作ってストア公開してみた2

(2016/9)
(この記事は、Xamarin Studio for Macでアプリを作ってストア公開してみた のつづきです)

ic_launcher新規プロジェクト作成

それでは、アプリを作り始めましょう。

まずはXamarinを立ち上げ、初期画面で”New Solution…”を選択。
Multiplatform>App>Native>Single ViewAppを選択します。
そして、”App Name””Organazaion Identifier”を入力していきます。
今回は
1)”App Name”:mirror
2)”Organazaion Identifier”:com.darjjeelling.app.mirror
とします。1)がアプリ名、2)がアプリ識別子です。
その他はとりあえずデフォルトにしておきましょう。

スクリーンショット2-01

これでプロジェクトが新規作成されました。

さて、今から作ろうとしているアプリがこちらですが、
鏡ミラー
https://play.google.com/store/apps/details?id=com.darjjeelling.app.mirror
前回説明しましたとおりこのアプリはカメラを使います。
なので、カメラへのアクセス権の設定が必要になります。

というわけでまずはマニフェストの設定を行っていきましょう。
Continue reading this entry »


Xamarin Studio for Macでアプリを作ってストア公開してみた

(2016/9)

ic_launcherはじめに

こんばんは、
iPhone/Androidアプリを作っているdarjjeellingといいます。

最近気になるクロスプラットフォーム開発ツールのXamarinですが、
これを使ってみて、Androidアプリを作ってストアに公開してみました。

そのアプリはこちらです。

鏡ミラー
https://play.google.com/store/apps/details?id=com.darjjeelling.app.mirror
Get it on Google Play

そしてオープンソースで公開中です。
https://github.com/darjjeelling/mirrorapp

いわゆる鏡アプリです。インカメラを使って自分の顔をうつして鏡として使えるものです。ただカメラ表示だけでなく、拡大したり明るくしたり、といった機能も付いています。

さてさて、Xamarinを使ってこのアプリを作ってみて、ネット上にはWindows開発環境での情報は多いですが、
Macでの開発情報が少なかった感じがしました。
また、アプリとしてストア公開するまでをひととおり通して書いている記事も、あまりなかったように感じました。
そこで、これからXamarinを使いたい方に、少しでも参考になればなと、ここに書いていこうかと思います。

これから5回(予定)にわたって、上記のAndroidアプリをXamarin Studio for Macで作ってストア公開に至るまでの作成過程を、ざっくりとではありますが載せていきたいと思います。
このアプリはシンプルでそんなに作るのも難しいものでもないですので、
もしよければおつきあいください。

この記事はどんな人向け?
・Xamarin+Macでアプリ開発してみたい人
・Xamarin Studio for Macがどんな感じか知りたい人
・Android開発の基礎知識がある人

この記事の開発環境
・Mac OSX El Capitan 10.11
・Xamarin Studio for Mac 6.0.2
・デバッグ端末 XperiaZ3 Compact SO-02G

この記事の筆者について
・Android StudioでAndroidアプリの作成経験あり
・XCodeでiPhoneアプリの作成経験あり
・Xamarinを今回初めて使いました
・Javaは知ってますが、C#は全く使ったことないです(お手柔らかにお願いします…)

ic_launcher準備

それではこれからアプリを作っていきたいと思いますが、
何はともあれ開発環境の準備です。

Continue reading this entry »