TAKOYAKING’s blog 一覧

TAKOYAKING’s blog

たこ焼き系

マウスをpythonで操れるPyAutoGUIを使ってQuickTimeの画面収録の枠を正確に自動生成

AndroidiOSのアプリのプロモーション動画(アッププレビュー)をどうやって作ろうか悩んでいた時に、QuickTimeを使ってPCのUnityEditorで実行している画面をiPhone, Androidの画面サイズに合わせて録画すればいいということを思いつきました。(実機いらないのでとても助かりました。)(SoundFlowerを使えば音もしっかり録音できます。)

ただ、QuickTimeで画面収録をするときに以下のような画面が現れて収録画面のサイズをマウスでドラッグして決めないといけないので、きっちりしたサイズで画面収録したかったので困りました。
f:id:TAKOYAKING:20160221180402p:plain
なんとかしてきっちり測りたかったのでマウスを操作できるライブラリないかと探してみたところ、PyAutoGUIというpython製のライブラリが見つかりました!
(Macしか試していませんが、PyAutoGUIはクロスプラットフォームで動作するみたいです。)


完成品
1200 * 900の枠のGIF

QuickTimeの画面録画の枠が正確に1200*900で生成されました。


インストール方法
Installation — PyAutoGUI 1.0.0 documentation
この通りにインストールしていきます。
以下Macです。(他のOSはリンクを参照してください。)

pip install pyobjc-core
pip install pyobjc
pip install pyautogui

pip install pyautoguiを実行したところで以下のようなエラーが出ました。

ImportError: No module named 'PIL'

以下をインストールすれば無事解決しました!

pip install image


少しだけ簡単な例を紹介します
指定場所までカーソル移動

pyautogui.moveTo(100, 200)

指定場所まで左クリックのドラッグ移動

pyautogui.dragTo(100, 200, button='left')

相対指定の場合はそれぞれ

moveRel
dragRel

です。
自分のPCの解像度は

pyautogui.size()

で取得できます。


実践
QuickTimeの画面収録の枠を自動生成するScript

import pyautogui
from time import sleep

X = 0
Y = 1


class Conf:
    '''解像度などを設定'''
    # the number of secs before exec
    SLEEP_SEC = 5

    # device resolution for landscape
    # resolution = (1136, 640)  # 5 Series(16:9)
    # resolution = (1920, 1080)  # 5 Series(16:9), iPhone 6 Plus
    # resolution = (960, 640)
    # resolution = (1334, 750)  # iPhone 6
    resolution = (1200, 900)  # iPad and iPad Pro 4:3
    # resolution = (960, 540)  # 1/2 5 Series(16:9), iPhone 6 Plus
    # resolution = (1440, 810)  # 3/4 5 Series(16:9), iPhone 6 Plus


class AutoCursorSelection:
    '''Confをもとにカーソル操作 left bottom corner To right top corner'''

    def __init__(self):
        self._init_size()
        self._init_start_pos()
        self._init_end_pos()

    def _init_size(self):
        self.size = pyautogui.size()
        if Conf.resolution == self.size:
            raise Exception(
                "PCの解像度が指定解像度と同じです。全画面は対応していません・・・PC解像度(x,y):{}".format(
                    self.size))

        if Conf.resolution[X] >= self.size[X] \
                or Conf.resolution[Y] >= self.size[Y]:
            raise Exception("PCの解像度より小さい値を縦横共に指定してください。PC解像度(x,y):{}".format(
                self.size))

    def _init_start_pos(self):
        center = self.size[X] / 2, self.size[Y] / 2

        self.start = (
            center[X] - Conf.resolution[X] / 2,
            center[Y] + Conf.resolution[Y] / 2)
        print("Start", self.start)

    def _init_end_pos(self):
        self.endRel = Conf.resolution[X], -Conf.resolution[Y]
        print("EndRel", self.endRel)

    def _move_to_start(self):
        pyautogui.moveTo(self.start[X], self.start[Y])

    def _drag_to_end(self):
        speed = 3
        pyautogui.dragRel(self.endRel[X], self.endRel[Y], speed, button='left')

    def exec(self):
        '''Execute'''
        sleep(Conf.SLEEP_SEC)
        self._move_to_start()
        self._drag_to_end()


if __name__ == '__main__':
    AutoCursorSelection().exec()


使い方

  1. Confクラスにあるresolutionを作成したいサイズに合わせてコメントを解除してください。
  2. そのあとこのScriptを実行してください。
  3. 5秒後にマウスが指定したresolutionに合わせてドラッグし始めますので5秒以内にQuickTimeの画面収録の画面サイズ指定のところまで実行させてください。

(5秒だと不憫に感じる方はConfのSLEEP_SEC=5を適宜変更してください。)
(よくわからなければ、一度適当にスクリプトを実行してみると、マウスが5秒後に動き始めるのでわかると思います。)

これでAndroidのプロモーション動画もiOSの多種多様なアッププレビューの動画サイズにも実機持っていなくてもUnityEditor上で全て作成できるようになりました!
作ってよかった!
(作りたい動画サイズの方がPCの解像度より大きい場合は一度小さい比率で作成しておいて、後で拡大すればOKです。アッププレビューはそれで乗り切りました!)


以上
Goodbye baseball!

UnityのuGuiのGrid配置で簡単にレビュー催促ダイアログをレイアウト

レビュー催促ダイアログを作ろうと思っていた時にuGUIにGrid配置ができることを知りました。

完成品
f:id:TAKOYAKING:20160219213138p:plain
Digital Puppet - プログラミングパズル - Google Play の Android アプリ



必要なもの(縦のGrid配置の時)
親要素

  • Vertical Layout Group
  • Content Size Fitter

子要素

  • Layout Elelment


実装方法
オブジェクト構成
f:id:TAKOYAKING:20160219213637p:plain
オブジェクト対応図
f:id:TAKOYAKING:20160219225253p:plain
FW: 外枠の画像
text: このゲームの満足度を教えてくれませんか?のテキスト
btnYes: 面白い!レビューしたい!のボタン

方法はとても簡単で親要素のであるFWにVertical Layout GroupとContent Size Fitterをつけて、子要素のボタン、タイトル、本文にはLayout Elementをつけるだけです。
Content Size FitterはVertical FitをPreferred Fitに設定してください。
f:id:TAKOYAKING:20160219224439p:plain
(Content Size Fitterは子要素のLayout Elementの高さが変わるとContent Size Fitterを持つ親要素も動的に変化してくれます。
これがなければ、子要素自体はGrid表示になりますが、子要素の高さに応じて親を自動で適切な高さに調節してくれることはありません。)


配置調整方法
Padding調整
親のFWに設置したVertical Layoutをいじります。
f:id:TAKOYAKING:20160219220342p:plain
Paddingの
Left
Right
Top
Bottom
を調整するとそれぞれ以下の部分に影響を与えます。
f:id:TAKOYAKING:20160219222627p:plain

Spacingを調整すると
LayoutElementを持つ子要素と子要素の間の間隔が変化します。
f:id:TAKOYAKING:20160219222641p:plain


子要素自体の大きさを変更したい場合は子要素に設置されているLayoutElementのPreferred Heightを調整します。
f:id:TAKOYAKING:20160219222952p:plain

「面白い!レビューしたい!」のボタンのPreferred Heightを大きくすると・・・
f:id:TAKOYAKING:20160219223040p:plain
ボタン自体の高さが高くなり、かつ、全体が収まるように自動的にunityが調節してくれてます。

このGrid機能を知らない時は手作業でちまちまやっていましたが、知ってからは断然作業が楽になりました!

以上

Goodbye baseball!

参考:
【Unity】新しくなった4.6の新GUIでスクロールビューを実装してみる(前編) | ぼくの答えはいつもNo…そしてイエス!
【Unity UGUI】スクロールするボタンを配置する。 | albatrus.com
uGUIのLayout - Qiita

Unity5.3でiosビルドした後にandroidビルドするとTextureの一部が真っ黒になってしまった時の解決方法

なぜかiOSビルド後にandroidをビルドすると今ままで表示できたいたキャラクターの画像が突然真っ黒になりました・・・

*イメージ画像(このような感じになります・・・)
f:id:TAKOYAKING:20160218182318p:plain

解決方法
真っ黒になるTextureをreimportすれば、正しく表示されるようになりました。
(よかった!)
対象の画像を右クリック > reimportでOK!
f:id:TAKOYAKING:20160218181616p:plain

考察
iOSビルドをした後におかしくなったようなので、Unity5.3だともしかしたらandroidiOSを行き来するとおかしくなるのかもしれません。
gitで過去のリビジョンをチェックアウトしても過去に正常に描画されていたものまで真っ黒になっていたので、Unityのバグなのではないかと思います。

わかるまで結構時間とられました・・・

以上

Goodbye baseball!

Photoshopでアプリアイコンを角丸にしてみた

やっぱりアプリアイコンは角丸派なので自分で作ったアプリの
play.google.com
アプリアイコンを角丸にしてみました!


作り方
作業の流れ

  1. 角丸四角で囲む
  2. 選択範囲を反転させる
  3. 切り取る


作成
1 角丸四角で囲む
元画像を用意
f:id:TAKOYAKING:20160208082258p:plain

左のツールから角丸四角を選択
f:id:TAKOYAKING:20160208080631p:plain

設定は上のタブから以下のように設定
今回は角丸具合を50に設定しています。
(Clash of Clansのアイコンが50くらいの角丸になっていたのでそちらを参考にしました!)
f:id:TAKOYAKING:20160208080825p:plain

アイコンいっぱいになるように囲みます。(ざっくりで大丈夫です。)
囲んだ後は数値をアプリアイコンいっぱいになるようにきっちりした数値を入れます。
f:id:TAKOYAKING:20160208080916p:plain

上のタブから選択を押します。
f:id:TAKOYAKING:20160208081121p:plain

そのままOKを押します。
f:id:TAKOYAKING:20160208081201p:plain

これで角丸の外枠をきれいに選択できたと思います。
f:id:TAKOYAKING:20160208082818p:plain


2 選択範囲を反転させる

上のタブから反転するを選択します。
Cmd + Shift + iでも反転できます。
f:id:TAKOYAKING:20160208081335p:plain

結果がこのようになります。
f:id:TAKOYAKING:20160208081436p:plain


3 切り取る

反転した選択範囲を切り取るためにdeleteキーを押して選択範囲を削除します。
切り取った後は選択範囲を解除するためにcmd + dを押して完成です。
f:id:TAKOYAKING:20160208081644p:plain



完成品がこちら
Before
f:id:TAKOYAKING:20160208082258p:plain

After
f:id:TAKOYAKING:20160118163232p:plain


やっぱり角はとんがっているより丸いほうがいい感じ!

以上
Goodbye baseball!

クラッシュオブクランズ(Clash of Clans)のバーバリアンの絵にチャレンジ

絵の練習のために一番遊んでいるゲーム、クラッシュオブクランズ(Clash of Clans)のキャラクターであるバーバリアンを描いてみました。
3年ほどクラクラで遊んでいますので、一番簡単そうなバーバリアンにチャレンジしてみます。
(Photoshopで描いています。)

参考画像のバーバリアン*1
f:id:TAKOYAKING:20160119175606j:plain



完成作品f:id:TAKOYAKING:20160119175648p:plain




バーバリアンができるまでの軌跡

1 ラフで初見
f:id:TAKOYAKING:20160119180025p:plain

誰?
まじですか・・・
正直この時点で心が折れかけました・・・


2 気を取り直してもう一度
f:id:TAKOYAKING:20160119180134p:plain

少し、バーバリアンに近づきました!
(良かった!)

でも少し口がの傾きがおかしい気がします。


3 口をPhotoshopの力で回転させてみた。
f:id:TAKOYAKING:20160119180311p:plain

少し回転させるだけでぐっと良くなった気がします!


4 基準線を導入
f:id:TAKOYAKING:20160119180414p:plain

やっぱり基準となる線があるとないとでは全然描きやすさが違うので、導入してみました。
Digital Tutorsで習ったことのうちの一つです。


5 基盤のバーバリアン完成
f:id:TAKOYAKING:20160119180539p:plain

最初に描いたバーバリアンよりも格段に良くなった気がします。
左目は気持ち少し小さく描くようにDigital Tutorsで習ったので、小さめに描いています。
さすが3回目!


6 影を入れて立体感を演出
f:id:TAKOYAKING:20160119180656p:plain
影はどこに入れたら良いのかまだあまりよくわかっていませんが、見よう見まねで入れていきます。
Digital Tutorsで
・目の部分の上下の白目に影を入れること
・目の瞳に白い丸いものを入れること
を習ったので、それも地味に入れてます。


7 装飾のよだれをつける
f:id:TAKOYAKING:20160119180944p:plain

消しゴムでよだれの部分を消していき、描きました。
正直白い部分の描き方がわかりません。


8 全体的に濃くして、完成f:id:TAKOYAKING:20160119181044p:plain



1と比べるとだいぶ良くなりました。1の時点で挫折しなくてよかった!
まだまだへたくそですが、完成するとモチベーションが一気に高くなりました!
やった!


参考画像*1
f:id:TAKOYAKING:20160119175606j:plain

Beforef:id:TAKOYAKING:20160119180025p:plain

After
f:id:TAKOYAKING:20160119181044p:plain


以上

Goodbye baseball!

*1「このコンテンツはSupercellに関係がなく、またSupercellによって保証され、後援され、特別に承認されたものではなく、Supercellには一切責任がありません。ファンコンテンツにおけるSupercell知的財産権Supercellファンコンテンツ利用規 www.supercell.com/fan-content-policy.に従うものとします。」

Photoshopでアプリアイコンにサンバーストを入れて、集中線効果を出してみた!

アプリアイコンの参考になるアプリを探しているとサンバーストを入れてるアプリアイコンがあったので自分のアプリにもPhotoshopでサンバーストを入れてみました。
(サンバーストととは集中線のように太陽型線になっている線のことです。)
参考アプリ
City 2048 - Google Play の Android アプリ

完成品
Digital Puppet - 頭脳派パズルゲーム - Google Play の Android アプリ

f:id:TAKOYAKING:20160118163232p:plain


作り方

作業の流れ

  1. Photoshopファイル作成
  2. グラデーション(Gradiant Tool)
  3. フィルターの波形(Filter Wave)
  4. フィルター極座標(Filter Polar Coordinates)

です。

作成
1 Photoshopファイル作成(Gradiant Tool)f:id:TAKOYAKING:20160118180302p:plain
今回はFile(ファイル) -> New(新規作成)から
Width(幅) 1024
Height(高さ) 1024
Resolution(解像度) 200
で作成してみました。


2 グラデーション(Gradiant Tool)

グラデーションツールを選択します。
f:id:TAKOYAKING:20160118180427p:plain

ココを選択して、グラデーションの設定をします。
f:id:TAKOYAKING:20160118180454p:plain

グラデーションは透明になるように設定します。
f:id:TAKOYAKING:20160118180551p:plain

その設定のまま、キャンバスに上から下に垂直にドラッグして、グラデーションをかけます。
(シフトキーを押せば垂直になります。)
このような感じになります。
f:id:TAKOYAKING:20160118180825p:plain


3 フィルターの波形(Filter Wave)

上部のタブからFilter(フィルター) -> Distort(変形) -> Wave(波形)を選択します。
f:id:TAKOYAKING:20160118181058p:plain

Wave(波形)の設定を画像の通りに設定します。
Wavelength(波長)で一つの波の幅を調節できます。
今回はmin 110 max 111に設定しました。
f:id:TAKOYAKING:20160118181217p:plain

このように仕上がると思います。
f:id:TAKOYAKING:20160118181412p:plain


3 フィルター極座標(Filter Polar Coordinates)

上部のタブからFilter(フィルター) -> Distort(変形) -> Polar Coordinates(極座標)を選択します。
f:id:TAKOYAKING:20160118185955p:plain

OKを押して完了させましょう。
f:id:TAKOYAKING:20160118190040p:plain

仕上がり具合はこちら。
f:id:TAKOYAKING:20160118190144p:plain

コレを自分のアプリアイコンに適用した結果がこちら

Before
f:id:TAKOYAKING:20160118190341p:plain

After
f:id:TAKOYAKING:20160118163232p:plain


集中線効果が出てて少しはアイコンにデーンみたいな雰囲気が出てるような気がします!

以上

Goodbye baseball!

Unityでレビューを書いてもらうためにゲーム内からGoogle Playに遷移する方法

Unityからレビューを書いてもらうためにGoogle Playに遷移する方法を調べていたら簡単にできました。

遷移

Application.OpenURL(url);

Google PlayのURL

string url = "market://details?id={your_id}"

marketの部分をhttpにするとブラウザか、Google Playかをユーザにゆだねることになります。

完成した画面がこちら
Digital Puppet - 頭脳派パズルゲーム - Google Play の Android アプリ
f:id:TAKOYAKING:20160115030622p:plain


以上


Goodbye baseball