21. キャラを一区間歩かせる。 の単元において

[kerotan0820]

/*****************************************************************************
一区を３２ピクセルとし、一区間移動するたびに４つの画像データをループさせます。　一回の移動範囲は３２ピクセルなので、それを８で割って表示すべき画像を求めるとのことらしいです
*****************************************************************************/

表示する画像を求める計算が


ch.img=image[(ch.x%32)/8 +12];
これで求められるとのことですが、理解ができません

その時のx座標、xh.x を 32　で割ったあまりから 32ピクセルを一区としたときにいくつ目の区間にいるかが求められるのはわかります。
そのあまりをなぜ８で割るのでしょうか

３２を４つに分けたいので、８で割ると書いてありますが、なぜ４つにわけるのに８つに分けるのでしょうか…
[（割ったあまり）/8+12]　ということですよね

割ったあまりが、丸めて４だったとしたら、４/８は小数点以下なので、切り捨てられて０。　０＋１２で１２の画像が表示

いくつめの区間なのか、という数字をなぜ割ったところでいくつ目の画像を表示できるのかもわかりません。

どうかご教示願います

■追記■
http://dixq.net/g/23.html
上記URLです

[kimuchi]

まずキャラクターの画像は、
上を向いているキャラ画像：image[0]〜image[3]
左を向いているキャラ画像：image[4]〜image[7]
下を向いているキャラ画像：image[8]〜image[11]
右を向いているキャラ画像：image[12]〜image[15]
となっています。

仮に右に１マス進む場合を考えることにします。
つまり使用したいキャラ画像は「image[12]〜image[15]」です。
３２ピクセル分で１マスの扱いですから、
キーを押すと「ch.x」→「ch.x+32」までキャラのx座標が進みます。

ここからが本題ですが、
image[(ch.x%32)/8 +12];

「ch.x%32」の取り得る値は「0〜31」です。これが現在のマスからの現在位置となっています。
現在のマスから目的地マスまで、４つの歩行画像を表示するためには、この値が
０　〜７　（１区間目）のときimage[12]
８　〜１５（２区間目）のときimage[13]
１６〜２３（３区間目）のときimage[14]
２４〜３１（４区間目）のときimage[15]
を表示すれば良い訳です。
32/4 = 8
つまり８ピクセル進む間同じ画像が表示されています。
そこで次のマスに進むまでの３２ピクセル間を８ピクセルで区切ります。（４区間に分けたいから）
ここで「ch.x%32/8」の値は、
０　〜７　のとき０
８　〜１５のとき１
１６〜２３のとき２
２４〜３１のとき３で、
４つの状態に分けることができます。
あとは画像配列の番号に会わせて１２を足してやっているだけです。

まとめると、
次のマスまで３２ピクセル移動する間を４つの区間に分けると
１区間が８ピクセルなので、元居たマスからの現在位置を８で割ることで、
今何番目の区間にいるのかが分かるので、
その区間番号に対応した画像を表示させて、歩行を表現しています。

文章力に乏しいので分かりづらい所があればお願いします。

[kerotan0820]

kimuchiさん＞＞

kimuchiさんの回答をもとに、わからない点を搾り出した結果、私は色々と計算式の意味を勘違いしていたようです。

(ch.x % 32)の範囲が　０～３１であり、それを８で割ることで[12+0]～[12+3]までの範囲を搾り出すことができるのですね。

本当に回答ありがとうございました。

お陰さまで助かりました。