WatchMaker再び

ふと思い出してやったこと。

だいぶ前に作ったWatchMakerのデータを、今のAndroid端末にお引越し。

WatchMakerというアプリは以下。

 https://play.google.com/store/apps/details?id=slide.watchFrenzy

自分は好きな盤面を作成できる有料版を購入している。

 https://play.google.com/store/apps/details?id=slide.watchFrenzy.premium

久々にAndorid端末にインストールしたら、かなりバージョンアップしていてよくわからなくなっていた。

ダウンロードできる盤面が有料ばっかりになってるし。

 

これを使って以前、BUMP OF CHICKENのG-SHOCKもどきを作っていた。

その時の記事はこれ

2年も前だったとは自分でも驚き。そりゃバージョンアップもするに決まってる。

が、作るときに参考にしていたフリーのデータ置き場がすでになくなっていた。

なのでもしフリーのデータをダウンロードしたいなら、以前Tipsを参照していたページで探すといい。

 https://www.watchawear.com

上記のメニューの「WATCHMAKER」「WatchMaker Face Free」からダウンロードできる。

ダウンロード前に、ライセンスに同意するところにチェックを入れる。

拡張子が.watchというファイルがダウンロードできるので、これをスマホに転送してアプリから読み込む。

(アプリのホーム画面、右上に「Import Watch」という項目)

あるいはGoogle+にコミュニティがあるけど(アプリ内にリンクがある)、そろそろGoogle+自体が終わるので、どうなるかが不明。

 

自分のMoto360にもWatchMakerをインストールして、久々に自分の作ったものを起動できた。

実は以前、バグというかちょっと表示がおかしくなったので使わなくなったんだが、バージョンアップしたところそれが治っていた。

しかしGifアニメをデフォルトでエクスポートしたけど、動きがおかしいぞ。

これは調整できるはずだけど、実際の使用には影響しないからまあいいか…。

 

あとデータをPCに転送しようとしたら、このWatchMakerのデータが入ってるフォルダがなぜか見えなかった。

(「BeautifulWatches」というフォルダ)

Mac上のAndroid File Transferを使ってるせいかな??これは謎。

一旦SDカードに移してから、中身をバックアップした。

Moto360自体古くなってきたけど、まだこの手のアプリが動くので大切にしたい。

Sponsered Link

WatchMakerでウォッチフェイスの作成(その2)

その1の続きをメモる。

BUMP OF CHICKENのG-SHOCKもどき作成。

 

作り方は検索すればいろいろあるけど、とりあえず正式なwikiを参照。
 http://watchmaker.haz.wiki/

あとは以下とかが参考になりそう。今回のにタグとかはあんまり仕込めなかったけど。

 http://watchawear.com/help/tips-tutorials-tricks.html

 

WatchMakerの最初の起動で、moto360を選択。

元にしようとダウンロードしたウオッチフェイスをWatchMaker上で開いて、「Customize Watch」をタップして作業する。

元の盤面を削除して、一番下のレイヤーに作成した盤面の土台を入れて、上に時間表記の文字、パーツを重ねた。

デジタルな文字盤をそのまま使いたかったけど、デザインが参考にしたG-SHOCKとちょっと違ったので調整。

日時をコピペして、すべてバラバラにした。

レイヤーのコピーは長押ししてユラユラ揺れるアイコンにした後、もう一度長押しして出てきた「duplicate」をタップ。

タグの間に「-」とか入れると演算子と認識されてエラーになってしまうので、そこだけ独立させてる。

 

ついでに曜日が日本語になってしまうのを修正。

これはみんな悩んだみたいで、検索すると出てくるんでそこからコピペしてもいいし。

'{ddw}' == '月' and 'Mon' or '{ddw}' == '火' and 'Tue' or '{ddw}' == '水' and 'Wed' or '{ddw}' == '木' and 'Thu' or '{ddw}' =='金' and 'Fri' or '{ddw}' =='土' and 'Sat' or '{ddw}' == '日' and 'Sun'

今回のデジタルフォントには小文字はないので、それは表現されない。

 

その他、各パーツの動きを設定。

●右上の回転する円はレイヤー追加してカスタマイズ。

 「Sharp」を選択して図形は「Circle」、色は黒、最終的にはShaderを「Radar」にしてみた。確かにレーダーっぽい。

●猫アイコンは目を開けてるのと閉じてるのを交互に表示。

 一方の画像の「Opacity」には

{ds}%6<3 and 100 or 0

 もう一方は

{ds}%6<3 and 0 or 100

 を、記載。

●鳥のアイコンは回転するスクリプト。

 これはまだよくわからなかったので、他のWatchFaceからコピペしてカスタマイズした。

 時計の「Script」に記載する方。

var_mode=1

function mode()
 if var_mode <3 then
    var_mode = var_mode +1
else
var_mode =1
end
end

function on_millisecond(dt)
if var_mode==1 or var_mode==2 then
end

tweens.gear1=
{abright}==true and 
15*math.floor( {drss}/1.5) or 0

end

 どこか間違ってるかもだけど、エラーは出てない。

 アイコンの「Rotation」に

tweens.gear1

 を、記載。

 

詳細はwikiやチュートリアルを参照。

完成したものをGIFアニメにできるので、やってみたのが以下。アンビエンスモードの時は動きは止まる。

まあ完成した感じはわかるかな?

 

気になってたLuaでスクリプトを組む目論見は、結局達成しなかった。

他のデータを見て、これじゃないかな?という程度。

まあ初めてということで(言い訳)画像以外はほとんどコピペで作ってしまったので、次はちゃんとデザインもオリジナルで動きも考えて作ってみたい。

Sponsered Link

WatchMakerでウォッチフェイスの作成(その1)

スマートウォッチのカスタムなのかLuaについて勉強したかったのかちょっと解らなくなってきたけど、やってたことをメモしておく。

(Twitterで呟いてた、G-SHOCKもどき)

 

簡単にスマートウォッチの文字盤を作成できるアプリ、WatchMaker。

 https://play.google.com/store/apps/details?id=slide.watchFrenzy.premium&hl=ja

他のこと調べてたら気になったので、インストールした。

自分はスクリプトとか組んでみたかったこともあって有料版を購入したけど、ちょっとした文字盤を作成するだけなら無料版でも十分。

WatchMakerで作成された既存のwatchファイルをカスタマイズできるので、慣れるまではそれを参考にした方が良さそう。

(ただしロックがかかっているものもあるようなので、参考にできないこともあるかも)

 

作ってみようと思ったのはBUMP OF CHICKENの公式グッズにあったG-SHOCK。

デジタルだし探したらG-SHOCKのウォッチフェイスを作成している人は多いので、簡単に作れると考えた。

タイプは似たようなのがあったので、以下からwatchファイルをダウンロード。

 http://www.badapps.fr/959/

(追記:今はありませんので、https://www.watchawear.comでフリーのものを選択してください)

WatchMakerで開いてみたところ実際にはあんまり似てなかったので、結局自力で作成してみることに。

 

時計の元画像を参考に、Illustratorで文字盤・パーツ等のデータ作成、Photoshopでpng形式に変換。

サイズは512x512、通常用と画面が暗くなった用を作成。

空いている箇所のパーツ用に、いろいろ作ってみた。

ちょっと薄めの画像をずらして重ねて、液晶っぽさを出したつもり。

すべてPNGファイルで、背景は透過。

 

最初はGIFアニメを作成してたんだけど、転送して置いてみたら色が変わって(ついでにサイズも何故か変わった)使えなかったので、アニメにしたいものはその数だけ画像を準備。交互に表示させてアニメにしようと考えた。

文字盤の数字は元にしたウオッチフェイスのものを使おうと思ったけど、念のためフォントを調べた。

DS-Digitalフォント、商用でなければフリーらしい。

 http://jp.ffonts.net/DS-Digital.font

 

ファイルはすべてスマホに転送して、WatchMakerにインポートして使用する。

当初アプリ自体の使い方がよくわからなかったので、参考用にダウンロードしたウオッチフェイスをカスタマイズして、必要ならレイヤーを差し替えていく方式にした。

結局ほとんどのレイヤー差し替えになったので、あまり意味なかったけど。
 

やったことをもうちょい書いておきたいので、続きは別ページに分ける。

Sponsered Link