COSUMIのFlashがきれいに拡大・縮小するようになりました

COSUMIの囲碁対局ゲームでページ全体を拡大・縮小した時などに、Flashががたがたせずに滑らかに拡大・縮小するようになりました。

オンライン囲碁ゲーム COSUMI
http://www.cosumi.net/

「なんでこんなにがたがたしちゃうんだろう」と、以前からかなり気にはなっていたのですが、「できることは全部やってるはずだし、こんなものなのかな」と、もうほとんどあきらめてました。ところがここにきて、その理由がわかった!

ActionScript 2.0のMovieClip.attachBitmapメソッドは、4番目の引数smoothingで、画像を滑らかに拡大・縮小するかを指定することができます。この項目は省略可能なんですが、省略した時のデフォルトはtrueだと自分の手元にあった日本語の公式のリファレンスに書いてあるんですよ。で、これが嘘でした…(泣) デフォルトはfalseです。公式のリファレンスにもいろいろなバージョンがあるのかもしれませんが、ちゃっと調べた感じ、英語の方には正しく載ってるみたいなんですけどね。ほんと、なんでこうなるの…

一色碁

作ってってコメントをこのブログにいただいたので、COSUMIに「一色碁」の対局ゲームを作ってみました。ていうか、目隠し碁を作った時にいっしょに作っておけば良かったんですが…

一色碁
http://www.cosumi.net/onecolor.html

一色碁って目隠し碁より簡単とはいえ思ったより難しいですね。正直、9路盤なら余裕かと思ってましたが、途中から白の巨大な団子石としか見えなくなってきて…(笑)

話のねたによかったら遊んでみてください。

* * * * * * *

Android 2.2+ではFlash Playerが動くようになったので(端末によっては動かないこともあるらしいけど)、これでこれからは携帯なんかでもCOSUMIで遊んでもらえるなあと喜んでいたんですが、実際に動くかどうかは今まで全く確認していなかったので、少し調べてみました。とりあえずアクセスログを見た感じでは、GALAXY Tab SC-01C、GALAXY S SC-02B、SIRIUS α IS06、GALAPAGOS SoftBank 003SHなどで終局まで打たれている形跡がありました。操作のしやすさなどに関しては全くわかりませんが、一応動くのは動くようです(良かった!)。私もAndroidのスマートフォンが少し気になってるんですが、もう買っちゃおうかな?

Flashな囲碁の棋譜ビューア Goswf

Goswfは、自分のウェブサイトで囲碁の棋譜を再生することができる、Flashでできた棋譜ビューアです。この手のソフトとしては、ほとんど完璧だと思います。

Gludion – Go game
http://www.gludion.com/go/

特徴を箇条書きしてみると

  • グラフィックがきれい
  • UIが分かりやすい
  • 表示サイズを変えられる
  • 色を変えられる
  • 棋譜の分岐に対応している
  • 日本語が通る
  • Flashでできている

と、いいことづくし。囲碁版KiFLAもすばらしいですが、こっちの方が個人的には好みです。

[追記 2009/12/5]

紹介だけでなく、このソフトの使い方も簡単に書いておきます。

上に貼り付けたのは、こんな感じのソースになっています。

<object data="http://www.perfectsky.net/flash/goswf.swf"
        type="application/x-shockwave-flash"
        width="520"
        height="390">
<param name="movie"
       value="http://www.perfectsky.net/flash/goswf.swf" />
<param name="FlashVars"
       value="url=http://www.perfectsky.net/misc/kifu/20091129.sgf&amp;move=127" />
</object>

FlashVarsurlでSGFファイルへのパスを、moveで初期表示局面が何手目かを指定します。ブログなどに貼り付ける場合は、urlは絶対パスの方がいいでしょう。棋譜の一番最後の手を初期表示局面にする場合は、moveを手数を超える大きな数字にするのが簡単で便利です。moveは必須ではありません。省略すると、対局開始時(0手目)が初期表示局面になります。

色を変えるには、navbgを指定します。色の濃い水色の部分がnavで、色の薄い水色の部分がbgです。

<object data="http://www.perfectsky.net/flash/goswf.swf"
        type="application/x-shockwave-flash" 
        width="520"
        height="390">
<param name="movie"
       value="http://www.perfectsky.net/flash/goswf.swf" />
<param name="FlashVars"
       value="url=http://www.perfectsky.net/misc/kifu/20091129.sgf&amp;move=127&amp;nav=4a8c48&amp;bg=cae6b2" />
</object>

高さより横幅が大きいと横長レイアウト、横幅より高さが大きいと縦長レイアウトに自動的になります。横長レイアウトの場合は、横幅と高さを4:3の比率にしないと無駄な余白ができ、縦長レイアウトの場合は、高さが横幅より十分に大きくないと下が少し切れてしまいますので注意してください。

<object data="http://www.perfectsky.net/flash/goswf.swf"
        type="application/x-shockwave-flash"
        width="390"
        height="520">
<param name="movie"
       value="http://www.perfectsky.net/flash/goswf.swf" />
<param name="FlashVars"
       value="url=http://www.perfectsky.net/misc/kifu/20091129.sgf&amp;move=127" />
</object>

以上、簡単な使い方の解説でした。

[追記 2010/4/4]

最近のバージョンでは、棋譜を直接ソースに書き込むことができるようになっています。

<object data="http://www.perfectsky.net/flash/goswf.swf"
        type="application/x-shockwave-flash"
        width="520"
        height="390">
<param name="movie"
       value="http://www.perfectsky.net/flash/goswf.swf" />
<param name="FlashVars"
       value="url=(;GM[1]FF[4]PB[安田秀策]PW[井上因碩]SZ[19]KM[0]RE[B+]
              ;B[qd];W[dc];B[pq];W[oc];B[cp];W[cf];B[ep];W[qo];B[pe];W[np];B[po];W[pp];B[op];W[qp];B[oq];W[oo]
              ;B[pn];W[qq];B[nq];W[on];B[pm];W[om];B[pl];W[mp];B[mq];W[ol];B[pk];W[lq];B[lr];W[kr];B[lp];W[kq]
              ;B[qr];W[rr];B[rs];W[mr];B[nr];W[pr];B[ps];W[qs];B[no];W[mo];B[qr];W[rm];B[rl];W[qs];B[lo];W[mn]
              ;B[qr];W[qm];B[or];W[ql];B[qj];W[rj];B[ri];W[rk];B[ln];W[mm];B[qi];W[rq];B[jn];W[ls];B[ns];W[gq]
              ;B[go];W[ck];B[kc];W[ic];B[pc];W[nj];B[ke];W[og];B[oh];W[pb];B[qb];W[ng];B[mi];W[mj];B[nd];W[ph]
              ;B[qg];W[pg];B[hq];W[hr];B[ir];W[iq];B[hp];W[jr];B[fc];W[lc];B[ld];W[mc];B[lb];W[mb];B[md];W[qf]
              ;B[pf];W[qh];B[rg];W[rh];B[sh];W[rf];B[sg];W[pj];B[pi];W[oi];B[oj];W[ni];B[qk];W[ok];B[qe];W[kb]
              ;B[jb];W[ka];B[jc];W[ob];B[ja];W[la];B[db];W[cc];B[fe];W[cn];B[gr];W[is];B[fq];W[io];B[ji];W[eb]
              ;B[fb];W[eg];B[dj];W[dk];B[ej];W[cj];B[dh];W[ij];B[hm];W[gj];B[eh];W[fl];B[fg];W[er];B[dm];W[fn]
              ;B[dn];W[gn];B[jj];W[jk];B[kk];W[ii];B[ik];W[jl];B[kl];W[il];B[jh];W[co];B[do];W[ih];B[hn];W[hl]
              ;B[bl];W[dg];B[gh];W[ch];B[ig];W[ec];B[cr];W[fd];B[gd];W[ed];B[gc];W[bk];B[cm];W[gs];B[gp];W[li]
              ;B[kg];W[in];B[lj];W[lg];B[gm];W[jf];B[jg];W[im];B[fm];W[kf];B[lf];W[mf];B[le];W[gf];B[hf];W[ff]
              ;B[gg];W[lk];B[kj];W[km];B[lm];W[ll];B[jm];W[ge];B[he];W[ef];B[ea];W[cb];B[fr];W[fs];B[dr];W[qa]
              ;B[ra];W[pa];B[rb];W[da];B[gi];W[fj];B[fi];W[fa];B[ga];W[gl];B[ek];W[em];B[ho];W[el];B[en];W[jo]
              ;B[kn];W[ci];B[lh];W[mh];B[mg];W[di];B[ei];W[lg];B[qn];W[rn];B[re];W[sl];B[mg];W[bm];B[am];W[lg]
              ;B[eq];W[es];B[mg];W[ha];B[gb];W[lg];B[ds];W[hs];B[mg];W[sj];B[si];W[lg];B[sr];W[sq];B[mg];W[hd]
              ;B[hb];W[lg];B[ro];W[so];B[mg];W[ss];B[qs];W[lg];B[sn];W[rp];B[mg];W[cl];B[bn];W[lg];B[ml];W[mk]
              ;B[mg];W[pj];B[sf];W[lg];B[nn];W[nl];B[mg];W[ib];B[ia];W[lg];B[nc];W[nb];B[mg];W[jd];B[kd];W[lg]
              ;B[ma];W[na];B[mg];W[qc];B[rc];W[lg];B[js];W[ks];B[mg];W[hc];B[id];W[lg];B[fk];W[hj];B[mg];W[hh]
              ;B[hg];W[lg];B[gk];W[hk];B[mg];W[ak];B[lg];W[al];B[bm];W[nf];B[od];W[ki];B[ms];W[kp];B[ip];W[jp]
              ;B[lr];W[oj];B[mr];W[ea];B[sr])
              &amp;move=127" />
</object>

Flashは動き始めるまでにダウンロードが完了しているとは限らない

以前からたまに、COSUMIのオンライン対局のFlashが動かない時があってちょっと気持ち悪く思っていたのですが、ようやくその原因が分かりました! どうやら、自身のswfファイルのダウンロード完了を待たずして動き始めたFlashが、まだダウンロードできてない部分のデータを必要として問題が起こっていたようです(なので、ブラウザがそのswfファイルをキャッシュに持っている時は問題が出なかった)。うーん、Flashというのは、ファイルがすべてダウンロードされてから動き始めるわけではないんですね! 一度分かってしまえばごくごく単純なことなんですが、Flashは最近初めたばかりなので、このあたりの基本がなってませんでした…

ということで、今回はMovieClip.getBytesLoadedMovieClip.getBytesTotalを使って、自身のswfファイルのダウンロードが完了するまでは、メインの動作を始めないように直しました。たぶんこれで大丈夫だと思います。

回線の速度やブラウザの種類、それからPCのスペックなども関係してくると思うので、はっきりしたことはよく分かりませんが、今までどれくらいの確率で動かなかったのかを考えるとめちゃくちゃ恐ろしい…(笑)

xyzzy用のactionscript-mode

今日2つ目の記事は、xyzzy用のactionscript-modeです。これは特に説明は要りませんね!

ActionScript mode for xyzzy
http://shield.jp/~dseg/xyzzy/actionscript-mode/

機能の詳細はリンク先で調べてください。コードヒントが文字化けする場合は、こちらページの一番下を参照のこと。一応ActionScript 2.0までに対応って感じみたいですが、3.0でも重宝するんじゃないでしょうか?

余談ですが、Flash制作のためにFlash Basic 8を購入したのですが、今これを少し後悔しています。と言うのも、本当に買うべきだったのは、Flex Builder 3だったような気がしてならないんですよね… 気分が悪くなるので、Flex Builderでなにができるのかあまり調べていません(笑)。