2015年12月4日

PebbleTime Roundは全画面表示できない件について(追記しました。)

前々回のアップで記載した、PebbleTime Roundの 180x180の解像度フルに表示できない件ですが、どの位表示できないか試してみました。下の画像の様にPebbleTime Roundの解像度180x180フルに太さ1ピクセルの赤い円、以下1ピクセルずつ小さく緑、青、黄、黒の線の円を描いた画像を背景画像にした現状のwatchfaceのDIGITAL_01を作りPebbleTime Roundにインストールしてみました。 


で、見えはこんな感じでした。赤、緑の線は見えません。青線も分かり難いです。


ほぼ正面から。黄色の外側に黒い線っぽいのが感じられるのが青、その外に隙間っぽく見えるのが緑、って感じです。


スケールがイマイチ合ってませんが、上の画像を拡大しての比較。


バックライト点灯状態の正面。バックライトが点くと緑の領域も確認できますが、大抵影になり通常はほとんど見えないです。


ということで、少なくとも赤は見えない、緑も通常は確認し難いので、やはりデザインする上では「全周2〜3ピクセルは額縁で隠される前提としてデザインする」のがよさそうです。(今回は黒モデルですが、別の色の額縁だとまた違うかもしれません。)

しかし、現状App Store等のwatchfaceの画像は180x180のデータをフルに表示された状態で掲載されているので、実機よりも液晶領域が広い=額縁幅が狭く見える状態になってしまっています。たかが数ピクセルですが、このサイズ感だと大分違います。こちらのフォーラムでもこの見えの差は詐欺だろ、みたいなことにもなってましたし(表示領域を額縁が隠している云々という話は無く、単にベゼル幅を狭く表示してて詐欺だろ、みたいなだけの様ですが。また、ここで紹介されている比較画像の青線の引き方も内側の線を狭めに引いていてちょっと誇張ぎみなのがなんですが)、逆に、現状の私のRound用watchfaceはこのことを考慮し、全周数ピクセル内側にオフセットしたデザインにしているのですが、そうするとApp StoreやiPhoneアプリでの180x180の画像は妙に外周に隙間がある様なデザインに見えてしまっています。下はアプリ画面のスクショですが、製品上の見えよりも明らかに全周妙に隙間のあるデザインに見える+額縁が狭い表示になってしまってます。(この180x180の画像を全周2〜3ピクセルマスクすれば製品と同じ見えの「液晶面」にはなりますが、そうした時に今度は額縁の広さ具合が製品の見えと同じになるかは、もう面倒なので検証してません。)


という訳で、「フル表示できない」件と「AppStore等で額縁狭く表示してる」件がからんでてちょっとややこしいのですが、現状は少なくとも液晶画面の製品上の見えとApp Storeの見えは異なるのは事実ですので、Pebbleはやはりそれ相応のサムネイル表示をする様な修正や、180x180フルフルでデザインしても全周2〜3ピクセルは表示出来ないよと公言2015.12.6. 追記:デベロッパー向けサイトで公言してました。すみません)すべきかと思います。(デベロッパーサイトを探してみてもそれ相応の記述は見つけられませんでした。) 特に円形文字盤だといわゆるアナログ時計の様に、外周ギリギリに分刻みの小さいインデックスの表示をしたデザインをしたい方もいるでしょうし。。

以上、Roundのwatchfaceをデザインする方向け(ほぼ自分だけか)な情報のアップでした。・・・そもそもこの額縁をちゃんとこのサムネイル画像の様に180x180フル表示する様に額縁の穴を広げ、本体側の金属ベゼルの角のテーパーをもう少しだけ寝かせて外側からも額縁を狭くし、現状よりも額縁の幅をもう少しだけでも狭くしてやると大分イメージが変わって良くなると思うのですが。。。まぁ、今からは無理ですかね。

2015.12.6. 追記:Pebbleの日本のコミュニティーにてご指摘いただきましたので記載修正しました。Pebbleのこちらのサイトにそれに相当する記述がありました。以下抜粋です。

The Pebble Time Round display requires a small two pixel border on each edge, to compensate for the bezel design. To this end, it is highly encouraged to allow for this in your app's design. This may involve stretching a background color to all outer edges, or making sure that readable information cannot be displayed in this margin, or else it may not be viewable.
Avoid thin rings around the edge display, even after accounting for the two pixel margin as manufacturing variations may cause them to be visibly off-center. Instead use thick rings, or inset them significantly from the edge of the screen.
そもそも一番最初にこのページを確認したはずなのですが、、大変失礼しました。(逆にTimeSteelの額縁はガラスへの裏面印刷なのですが、液晶表示領域よりも広くなっており、表示出来ない領域も角R部も含め全周見えちゃってます。Roundの液晶デバイスの製造上の位置決めがTimeSteelよりもばらつく、ということなのですかね?)