Forked from: phi's enchant.js - Sprite を移動させてみよう View Diff (11)

Fork
12
Fav
0
View
10037
  • Play

Fullscreen

Smart Phone

Fork tree

  • Readme
  • JavaScript 39 lines
  • HTML 1 lines
  • CSS 1 lines
// [About]
frame の値を変更することでアニメーションさせることができます.

仕組みとしては, 使用している画像 http://enchantjs.com/assets/images/chara1.gif
サイズが 160 * 96 で生成している Sprite のサイズが 32*32 なので

frame = 0; // 左上(0, 0) ~ 右下(32, 32)
frame = 1; // 左上(32, 0) ~ 右下(64, 32)
frame = 2; // 左上(64, 0) ~ 右下(96, 32)

の位置の画像が表示されます. 今回のサンプルでは 0~2 をループさせているので
左上のクマから3つ目のクマまでがループ表示されいるので走っているように見えると思います.

// [enchant.js]
Official = http://enchantjs.com/ja/?s=ja (ja) || http://enchantjs.com/en/ (en)
Blog = http://wise9.jp/
Dev Blog = http://blog.enchantjs.com/ja/ (ja) || http://blog.enchantjs.com/ (en)

// [phi]
ハンドルネーム, 気軽に質問やアドバイス下さいな♪
Blog = http://tmlife.net/
Twitter = https://twitter.com/#!/phi_jp

// [Entry]
全 tips へのリンクは『enchant.js 怒涛の 100 tips』にまとめてあります.
http://tmlife.net/?p=5396
  • enchant.js - Sprite をフレームアニメーションさせてみよう
  • enchant.js v0.4.0
  • enchant.js - Sprite をフレームアニメーションさせてみよう

play

Complete!

Description What kind of game?

Control Device

jsdo.it websocket controller

Mouse

keyboard

smartphone

Fullscreen

phi

Author

  • Twitter
  • Github

ゲームプログラマやりながら執筆してる27歳. phina.js(tmlib.js) というライブラリ作ってます. 著書「enchant.js スマートフォンゲーム開発講座」 『日本国民全員プログラマ化計画』進行中 Math/JavaScript/HTML5/CSS3/Python/C/C++/C#/Java

Blog http://phiary.me

Default Panel

Size

  • Width: px
  • Height: px

code

QR Code

Discussion

Questions on this code?

Tags

Forked

sort by