更新：2022年8月1日 HSPトップへもどる
①『 セルでマップ表示 』 ◆ブラウザ上で動作するページ
②『 マップをスクロール（セル単位） 』◆ブラウザ上で動作するページ
★このスクリプトは WebDish素材のみ使用し、独自画像を使用していませんので、WebDishサービスにそのまま登録できます
いちばん簡単なマップ表示のサンプルスクリプトです。
①のサンプルスクリプト
#include "hsp3dish.as"
title "いちばん簡単なマップ表示 1"
buffer 1,256,128 // ID 1 （画像バッファ）を準備。読み込むセル画像サイズにあわせてある
celload "mapbg.png",1 // セル画像をID 1 へ読み込む。 picload は ダメ！
celdiv 1,64,64 // マップチップ１個の大きさを指定
gsel 0 //描画先を ID 0 にもどす（ Dishプログラムでは常にID 0 だけがメイン画面）
cew=64 : ceh=64 // セル１個の大きさ
// マップデータ 10 * 10 マス（実際の画面に表示されるのは全体の一部分の領域。画面サイズによる）
map= "6666666666"
map=map+"6000000006"
map=map+"6012110006"
map=map+"6003330006"
map=map+"6003000006"
map=map+"6003500006"
map=map+"6003333306"
map=map+"6000000006"
map=map+"6000000006"
map=map+"6666666666"
// ↑普通の一行に長い文字列変数を見やすいカタチで作っている（代入している）だけ
// 0=草原 1=森 2=村 3=土 4=城 5=山（草の上） 6=水面 7=山（土の上）
//==========================================↓
//メインループ
*main
stick key,15 // キーボードとマウスの入力受付
if key&128 : end // ESCキーで終了
redraw 0 //仮想画面を書き換えるだけで画面にまだ出さずにおく
gosub *map_put //マップ描画
//マウス座標表示（※削除してもよい）
title "("+mousex+","+mousey+")" //ウインドウ上部タイトルバーに表示
redraw 1 //実際の画面へ表示する
await 100
goto *main
//================================================================
// マップを描画
*map_put
x=0
y=0
repeat 10
repeat 10
c=strmid(map,y*10+x,1) // マップデータ（文字配列）から1文字だけを取り出す
a = int(c) // 文字列型の「数字」を「数値」に変換
pos x*cew, y*ceh // 左から何個目、上から何行目のセルの位置に
celput 1,a // 対応するセルを１つ描画（ a は 0～7 の数値）
x++
loop
x=0 //左から何個目のセルか？
y=y+1 //上から何行目のセルか？
loop
// ※ここでは 横10個 × 縦10個 計100個 のセルの描画を繰り返している。
// 実際の開発では、画面内にみえるぶんだけ繰り返せばよい。
return
//================================================================・こちらのWebDish素材 一覧にあるモノは、ファイル名を直接書けば、おなじように直接呼び出して使うことができます。
hsptv_img.png
には、マップ用のセルとキャラクターのセルが一緒に入っています。
・画像一覧の絵柄が見たい場合は、自分のパソコンのHSP開発セットがはいっているフォルダの
[hsp37beta]-[hsptv] または
[hsp36]-[hsptv]
を開いてみましょう。
・独自のセル画像（マップ用の地形画像）を自分でつくって表示することももちろんできます。
ただし、独自の画像ファイルを使う場合は、WebDishサービス ではなく、自分のサーバ・スペースなどにアップロードします。
②のサンプルスクリプト
#include "hsp3dish.as"
title "いちばん簡単なマップ表示 2" // セル単位のスクロール
screen 0,320,480
buffer 1,256,128 // ID 1 （画像バッファ）を準備。読み込むセル画像サイズにあわせてある
celload "mapbg.png",1 // セル画像をID 1 へ読み込む。 picload は ダメ！
celdiv 1,64,64 // マップチップ１個の大きさを指定
gsel 0 //描画先を ID 0 にもどす（ Dishプログラムでは常にID 0 だけがメイン画面）
cew=64 : ceh=64 // セル１個の大きさ
ofsx=0 : ofsy=0 //
// マップデータ 10 * 10 マス（実際の画面に表示されるのは全体の一部分の領域。画面サイズによる）
map= "6666666666"
map=map+"6000000006"
map=map+"6012116106"
map=map+"6003333006"
map=map+"6003001116"
map=map+"6003501416"
map=map+"6003333316"
map=map+"6000000006"
map=map+"6000000006"
map=map+"6666666666"
// ↑普通の一行に長い文字列変数を見やすいカタチで作っている（代入している）だけ
// 0=草原 1=森 2=村 3=土 4=城 5=山（草の上） 6=水面 7=山（土の上）
//==========================================↓
//メインループ
*main
stick key,15 // キーボードとマウスの入力受付
if key&128 : end // ESCキーで終了
if key&1 : ofsx-- // ←方向キー（物理キーボード）
if key&2 : ofsy-- // ↑
if key&4 : ofsx++ // →
if key&8 : ofsy++ // ↓
// 《 タッチ検出 》
mtlist touchid //現在タッチされている情報を持つポイントIDリストを取得
id = touchid(0) //シングルタッチのみ対応
mtinfo touch,id
if touch(0) = 1 { //タッチしているあいだは実行
//どこがタッチされたか判定
ty = touch(2) : tx = touch(1) //タッチされたxy座標
if tx<140 : ofsx-- //左
if tx>200 : ofsx++ //右
if tx>140 && tx<200 && ty<400 : ofsy-- //上
if tx>140 && tx<200 && ty>400 : ofsy++ //下
//↑判定条件を各自4つ持てばもっと厳密に範囲判定できる
}
// 限度判定 （端までスクロールしたらそれ以上は行けない）
if ofsx<0 : ofsx=0
if ofsy<0 : ofsy=0
if ofsx>5 : ofsx=5
if ofsy>5 : ofsy=5
redraw 0 //仮想画面を書き換えるだけで画面にまだ出さずにおく
color 1,1,1 : boxf //黒色で、画面をぬりつぶす
color 255,255,255 //白色で
font "",60
pos 140,340 : mes "■" //上
pos 140,400 : mes "■" //下
pos 86,370 : mes "■" //左
pos 192,370 : mes "■" //右
gosub *map_put //マップ描画
redraw 1 //実際の画面へ表示する
await 100 // 動作が遅すぎる、速すぎる場合はこの数値を調整
goto *main
//================================================================
// マップを描画
*map_put
x = 0
y = 0
repeat 5
repeat 5
c=strmid(map,(ofsy+y)*10+(ofsx+x),1) // マップデータ（文字配列）から1文字だけを取り出す
a = int(c) // 文字列型の「数字」を「数値」に変換
pos x*cew, y*ceh // 左から何個目、上から何行目のセルの位置に
celput 1,a // 対応するセルを１つ描画（ a は 0～7 の数値）
x++
loop
x=0 //左から何個目のセルか？
y=y+1 //上から何行目のセルか？
loop
// ※ここでは 実際に画面にみえる 横5個 × 縦5個 計25個のセルの描画を繰り返している
return
//================================================================・このサンプルでは map データは単純な「文字列変数」になっています。
「２次元配列」をつかって map をあつかうこともできます。
例：
dim map,32,32 // map を２次元配列として初期化
// 32個の要素が入る配列を32個用意
map(0,0)=6 // マップの一番左上に「水面」を設定
または
mapsx=32 : ,mapsy=32
dim map,mapsx,mapsy //初期化
map(1,1)=0
// マップ左上から右に２つ目、下に２つ目のセルに「草原」を設定