Apex Legendsのキャラクターをゆるキャラ化して修正
2年ほど放置していたWear OS用のWatchFace、Apex Legendsのキャラが背景というシンプルなWatchFaceでしたが、26種類のレジェンド達をゆるキャラ化して最新のxmlの仕様に変えてアップデートしました。


時計の秒針をなめらかに動かすかどうかのON・OFFスイッチに加え、バッテリーの残量表示のON・OFFも追加しました!

画面を長押しで、鉛筆マークがでて、設定変更できるわよ
ちなみに、最新のWatchFaceはプログラムのコードは一切書けない仕様となってました。
xmlで定義されているので、とにかく省エネに力を入れて、ユーザー体験ってやつを向上させる事に注力しているのを感じましたw
※ Google公式のWatchFaceのサンプルがあるので、これを参考にしつつ作成しました。
まぁGeminiに読ませて必要な部分を取り出したって感じですけれど。

昔と違って、例えばエラーメッセージの原因を調べるのに多大な時間を費やすことが少なくなったし、AIのおかげで時短出来て助かってるわ。
Chib Legends Watch Faceのキャラクター一覧
せっかくなので、キャラクターを紹介!
26種類のApex Legendsのキャラが元ですw


























これらのキャラと時計の針の色の組み合わせで、自分好みにカスタマイズできるのが特徴です。
因みにキャラクターはGhatGPTで大本を作り、影とハイライトはPythonでプログラムで出力し、最後にGimpという、Photoshop風の昔からLinuxで有名だったソフトを使って合成しました。
ウォッチフェイス作成の裏話


今のWatchFaceでは、こんな感じに影・ベース・ハイライトの複数画像をずらして重ねることで立体感を出すデザイン手法が一般的に使われているわ
ちなみにPythonで元画像から自動でハイライトと影を作成するスクリプトはこんな感じです。
※ 利用OSはWindowsです。
import os
import glob
from PIL import Image, ImageFilter, ImageChops
def process_assets():
for png_file in glob.glob("*.png"):
# 二重処理防止
if "_shadow" in png_file or "_highlight" in png_file:
continue
base_name = os.path.splitext(png_file)[0]
print(f"Processing: {png_file}...")
base = Image.open(png_file).convert("RGBA")
width, height = base.size
alpha = base.getchannel('A')
# --- 判定:針や目盛りか、キャラか ---
is_thin_part = any(x in png_file.lower() for x in ["hour", "minute", "index", "curve"])
# --- 1. 影(Shadow)の生成 ---
# 針などは影を細く(radius小さめ)、キャラは太く(radius大きめ)
shadow_radius = 5 if is_thin_part else 15
shadow_opacity = 180 if is_thin_part else 150 # 針の影は少し濃いめがリアル
shadow = Image.new("RGBA", (width, height), (0, 0, 0, 0))
shadow.paste((0, 0, 0, shadow_opacity), (0, 0), mask=alpha)
shadow = shadow.filter(ImageFilter.GaussianBlur(radius=shadow_radius))
shadow.save(f"{base_name}_shadow.png")
# --- 2. メタル・ハイライト(Highlight)の生成 ---
# 針や目盛りには「エッジのテカリ」だけ、キャラには「広範囲の反射」
if not is_thin_part:
# キャラのメタル質感処理(前のコードと同じ)
edges = base.filter(ImageFilter.FIND_EDGES).convert("L")
edges = edges.point(lambda p: p > 30 and 255)
highlight_map = Image.linear_gradient("L").rotate(45).resize((width, height))
metallic_shine = Image.new("RGBA", (width, height), (0, 0, 0, 0))
mask = ImageChops.multiply(edges, highlight_map)
metallic_shine.paste((255, 255, 255, 180), (0, 0), mask=mask)
metallic_shine = metallic_shine.filter(ImageFilter.GaussianBlur(radius=1.5))
metallic_shine.save(f"{base_name}_highlight.png")
else:
# 針などの細いパーツは、ハイライトなしでも影だけで十分リアルになります
pass
print("\n✨ パーツごとの最適化処理が完了しました!")
process_assets()


このまま3枚をバラバラにして重ねた方がよかったのだけれど、xmlの記述がめんどくさくなるので、とりあえずGimpで1枚にまとめてアップしたのです。
キャラクターの画像だけではなく、時計の針の部分も3枚重ねにしたくなるから、今回はシンプルにしました。

今回は、古い仕様のWatchFaceを新規格のxmlのバージョンにアップデートする事が目的だったのよ。
なので、とりあえず簡単な方法でアップしたのよ。
Chibi Legends Watch Faceをダウンロード&Githubのコード
WatchFaceの仕様が変わったので、対応のWear OSのバージョンは3.0以降になります。
スマートウォッチに搭載されているPlayStoreからダウンロードできます!

ソースコードはGitHubにあげてますので、よければ参考にしてください!
Cyber Idol Watch Faceをダウンロード
ちなみに同じく2年程度放置していたMiku Watch Faceもアップデートしてストアに公開しています!
※ 名前はCyber Idol Watch Faceに変えています。
こちらは全9種類、8人のVocaloidのキャラが変えれる仕様となってます。

こちらもGithubにソースコードアップしてるので、よければ参考にしてください。

コメント