work_JavaSwing
SwingProject — 2Dキャラ歩行デモ
JAVA SWING → HTML5
2Dキャラ歩行デモ SwingProject
SWINGPROJECT — HTML5 REMAKE
2Dキャラのデータは、だいたい「１枚もの」の画像（1枚 384×384 に 8キャラ×3モーション×4方向）に収められています。 このサンプルは、そこから１人分を切り出してキャラクターとして歩かせる（アニメーションさせる） Java Swing プログラムです。 JLabel + ImageIcon による切り出しを、ブラウザ（HTML5 / CSSスプライト）に移植しました。
あそびかたHOW TO PLAY
STEP 1
PUT で配置
PUTボタンを押すとキャラが現れ、300msタイマーの歩行アニメーションが始まります。
STEP 2
マウスで歩かせる
パネル内でマウスをぐりぐり動かすと、キャラがカーソルに追従して歩きます（タッチでも可）。
STEP 3
向き・キャラを変える
左クリックで向きが 下→左→右→上 と回転。右クリックでキャラが8種類切り替わります（画面下の「向き変更」「キャラ変更」ボタンでも可）。「切り出し」ボタンは1コマ切り出しのデモです。
デモ動画DEMO MOVIE
キャラ3種類を切り替えながら、向きを変えて歩かせた様子（自動ループ再生）
この移植についてFACTS
32×48
1セルのドット寸法。2倍ズーム表示（64×96）も原作の指定どおり
8×3×4
8キャラ×3モーション×4方向が1枚の 384×384 PNG に収納。座標計算式も原作のまま
300ms
歩行アニメのタイマー間隔。モーションは 0→1→2→1…のピンポン巡回
Swing→HTML5
JLabel + ImageIcon の切り出しを CSS background-position に置き換えてブラウザ化
原作について（リポジトリREADMEより）
Java Swing フレームワークを使った Windows アプリのサンプル集の1本（Eclipse 4.2 Juno + Swing Designer）。
「Swing は Android と構造がとても良く似ているので、UI開発前に学習すると良いかもです。」
リポジトリには WebAPI・スクレイピング・キー入力など他のサンプルも同梱。キャラ画像は無料素材を使用しています。