HTML5とJavaScriptでの! スマートフォンアプリ作成入門講座 第3回 開講日スケジュール • 1/18(土) • 1/25(土) • 2/8(土) • 2/15(土) • 2/22(土) • 3/8(土) • 3/15(土) • 3/29(土) 最近の面白コンピュータ事情 • PhotoShop動画が面白い • http://www.youtube.com/watch? v=nM9sVVpGfmc 3.2 スプライトの利用 • 背景画像の上で動く、描画オブジェクト 画面上で動く キャラクターが スプライト index.htmlの確認 • エディタでindex.htmlを開き、enchant.jsの読 み込みが入っているか確認 • <script type="text/javascript" src="../ enchant.js-builds-0.8.0/build/enchant.js"></ script> SpriteExを改造してみよう！ • 歩く速度を高速化！ • シロクマ、女の子クマに、キャラを変更してみ よう！ • 歩くたびに、熊の背がのびる！(scaleYに、毎フ レーム0.01足す) • 歩くたびに、熊がちょっとずつ回転する！ 3.3 サーフェイスの利用 • サーフェイスは、画像や図形の情報を保持する 画像データです。 • SurfaceEx実行画面 SurfaceEx改造してみよう！ • 拡大をもっと激しく！ • 一つ一つのオブジェクトを10フレームより長く表示するよ うにしてみる！ • 3フレームに１回のところを、２フレームに１回表示にして みる！ • 四角形しか出ないようにしてみる！ • 三角形を出るようにしてみる！（線を３回引けばできるはず） 3.4 触って操作！ （タッチイベント） • スマホでおなじみのタッチ操作！ • タッチイベントは３種類 • タッチが始まった時に発生するイベント • タッチが移動した時に発生するイベント • タッチが終了した時に発生するイベント TouchExを改造してみよう！ • キャラクターの移動速度を速くしてみよう！！ • 背景を変更してみよう！ • タッチが終了したら歩き出すように変更してみ よう！ 3.5 バーチャルキーパッドで 操作しよう • 十字キー入力を仮想的に行う • 昔のiPhoneゲームなどで使われていることが多 いユーザインターフェイス • 若干使う上でクセあり KeyExを入力する上での 注意点 • index.htmlに、ui.enchant.jsを追加 • • <script type="text/javascript" src= ../enchant.js-builds-0.8.0/ build/plugins/ui.enchant.js"></script> ui.enchant.jsで使われているencnantjs/imagesの画像ファイルを index.html、main.jsと同じディレクトリに置く • apad.png • pad.png • font0.png • icon0.png KeyExを改造する！ • 移動に加速度を使ってみよう！！！ • 加速度を使うと、かなり動きの楽しさが出せ る！！ • http://www.dennougei.com/js_course/ kasoku.zip
© Copyright 2024 ExpyDoc
