（この「ひながた」ページは作成途中の仮のものです。2018年10月現在）
その1 【マウス操作のプログラムをつくる場合】
#include "hsp3dish.as"
//プログラムに使用する画像を読み込んでおく
celload "mouse.png",1
//状態は常に変化する可能性があるので毎回処理を実行しつづける構造になっています
*top
//キーが押されているか調べて状態を取得する
//メインキーボード1のキー
getkey key1,49
//メインキーボード２のキー
getkey key2,50
//メインキーボード3のキー
getkey key3,51
//マウスの左ボタン
getkey keym1,1
//テンキー1のキー
getkey keyt1,97
//テンキー２のキー
getkey keyt2,98
//テンキー3のキー
getkey keyt3,99
//マウスの座標を取得する
myx = mousex
myy = mousey
//画面に表示する内容をすべて用意して、できたら画面に出力する（更新）
//いったん画面への出力をとめておく
redraw 0
//画面背景を塗る
color 0,0,255
boxf
//文字の色を指定して、文字で情報を表示
color 255,255,255
pos 0,0
mes myx
mes myy
mes key1
mes key2
mes key3
mes keym1
mes keyt1
mes keyt2
mes keyt3
//マウスカーソルを表示
gmode 2
pos myx,myy
celput 1
//画面に出力実行
redraw 1
//すこし待ち時間をおく（単位は 1 = 1000分の1秒）
await 10
//情報の取得と画面出力をくりかえし実行できるように処理の先頭へもどる
goto *top
【このプログラムに使用する画像】
・マウスカーソル画像 (90*24)
下にある画像上にマウスカーソルをあて右ボタンで「名前をつけて画像を保存」 mouse.png して、作成したプログラム test.hsp と同じフォルダ内に配置します
その2 【テレビのようなレイアウトのプログラムをつくる場合】
#include "hsp3dish.as"
//プログラムに使用する画像を読み込んでおく
celload "mouse.png",1
//現在のチャンネル番号
chan = -1
//状態は常に変化する可能性があるので毎回処理を実行しつづける構造になっています
*top
//キーが押されているか調べて状態を取得する
//メインキーボード1のキー
getkey key1,49
//メインキーボード２のキー
getkey key2,50
//メインキーボード3のキー
getkey key3,51
//マウスの左ボタン
getkey keym1,1
//テンキー1のキー
getkey keyt1,97
//テンキー２のキー
getkey keyt2,98
//テンキー3のキー
getkey keyt3,99
//マウスの座標を取得する
myx = mousex
myy = mousey
//画面に表示する内容をすべて用意して、できたら画面に出力する（更新）
//いったん画面への出力をとめておく
redraw 0
//画面背景を塗る
color 0,0,255
boxf
//番組映像エリアを描画
color 80,80,80
boxf 120,50,120+400,50+250
//チャンネルボタン1を描画
color 100,100,100
boxf 45,360,45+150,360+80
color 255,255,255
pos 45+70,360+30
mes "1"
//チャンネルボタン2を描画
color 100,100,100
boxf 245,360,245+150,360+80
color 255,255,255
pos 245+70,360+30
mes "2"
//チャンネルボタン3を描画
color 100,100,100
boxf 445,360,445+150,360+80
color 255,255,255
pos 445+70,360+30
mes "3"
//文字の色を指定して、文字で情報を表示
color 255,255,255
pos 0,0
mes myx
mes myy
mes key1
mes key2
mes key3
mes keym1
mes keyt1
mes keyt2
mes keyt3
//マウスがクリックできる領域上の位置にいるか判定する
sel = -1
if myx > 45 && myx < 195 && myy > 360 && myy < 440 { sel = 1 }
if myx > 245 && myx < 395 && myy > 360 && myy < 440 { sel = 2 }
if myx > 445 && myx < 595 && myy > 360 && myy < 440 { sel = 3 }
//なにかの領域上にいるなら情報を表示
if sel > -1 { pos 300,0 : mes "On " + sel } else { pos 300,0 : mes "Non" }
//なにかの領域上にいる最中に、マウス左ボタンが押された場合は、特定の処理（チャンネルをセット）を実行する
if sel > -1 && keym1 = 1 { chan = sel }
//チャンネルがセットされていればその番組を表示する
housoukyoku = ""
bangumi = ""
if chan > -1 {
if chan = 1 { housoukyoku = "[ 1:MHK ]" : bangumi = "朝の連続ドラマ： こものなかからの人生" }
if chan = 2 { housoukyoku = "[ 2:TOKYO ]" : bangumi = "アニメ： うずまき乾電池ボルト" }
if chan = 3 { housoukyoku = "[ 3:NIPPON ]" : bangumi = "お笑いバラエティ： ひょっとこさん" }
}
pos 120,50 : mes housoukyoku : mes bangumi
//マウスカーソルを表示
gmode 2
pos myx,myy
celput 1
//画面に出力実行
redraw 1
//すこし待ち時間をおく（単位は 1 = 1000分の1秒）
await 10
//情報の取得と画面出力をくりかえし実行できるように処理の先頭へもどる
goto *top
その3 【テレビのようなレイアウトのプログラムをつくる場合】
画像つきバージョン
#include "hsp3dish.as"
//プログラムに使用する画像を読み込んでおく
celload "mouse.png",1
celload "bangumi1.png",11
celload "bangumi2.png",12
celload "bangumi3.png",13
//現在のチャンネル番号
chan = -1
//状態は常に変化する可能性があるので毎回処理を実行しつづける構造になっています
*top
//キーが押されているか調べて状態を取得する
//メインキーボード1のキー
getkey key1,49
//メインキーボード２のキー
getkey key2,50
//メインキーボード3のキー
getkey key3,51
//マウスの左ボタン
getkey keym1,1
//テンキー1のキー
getkey keyt1,97
//テンキー２のキー
getkey keyt2,98
//テンキー3のキー
getkey keyt3,99
//マウスの座標を取得する
myx = mousex
myy = mousey
//画面に表示する内容をすべて用意して、できたら画面に出力する（更新）
//いったん画面への出力をとめておく
redraw 0
//画面背景を塗る
color 0,0,255
boxf
//番組映像エリアを描画
color 80,80,80
boxf 120,50,120+400,50+250
//チャンネルボタン1を描画
color 100,100,100
boxf 45,360,45+150,360+80
color 255,255,255
pos 45+70,360+30
mes "1"
//チャンネルボタン2を描画
color 100,100,100
boxf 245,360,245+150,360+80
color 255,255,255
pos 245+70,360+30
mes "2"
//チャンネルボタン3を描画
color 100,100,100
boxf 445,360,445+150,360+80
color 255,255,255
pos 445+70,360+30
mes "3"
//文字の色を指定して、文字で情報を表示
color 255,255,255
pos 0,0
mes myx
mes myy
mes key1
mes key2
mes key3
mes keym1
mes keyt1
mes keyt2
mes keyt3
//マウスがクリックできる領域上の位置にいるか判定する
sel = -1
if myx > 45 && myx < 195 && myy > 360 && myy < 440 { sel = 1 } if myx > 245 && myx < 395 && myy > 360 && myy < 440 { sel = 2 } if myx > 445 && myx < 595 && myy > 360 && myy < 440 { sel = 3 } //なにかの領域上にいるなら情報を表示 if sel > -1 { pos 300,0 : mes "On " + sel } else { pos 300,0 : mes "Non" }
//なにかの領域上にいる最中に、マウス左ボタンが押された場合は、特定の処理（チャンネルをセット）を実行する
if sel > -1 && keym1 = 1 { chan = sel }
//チャンネルがセットされていればその番組を表示する
housoukyoku = ""
bangumi = ""
if chan > -1 {
if chan = 1 { housoukyoku = "[ 1:MHK ]" : bangumi = "朝の連続ドラマ： こものなかからの人生" }
if chan = 2 { housoukyoku = "[ 2:TOKYO ]" : bangumi = "アニメ： うずまき乾電池ボルト" }
if chan = 3 { housoukyoku = "[ 3:NIPPON ]" : bangumi = "お笑いバラエティ： ひょっとこさん" }
//番組画像を表示
gmode 0
pos 120,50
celput 10+chan
}
pos 120,50 : mes housoukyoku : mes bangumi
//マウスカーソルを表示
gmode 2
pos myx,myy
celput 1
//画面に出力実行
redraw 1
//すこし待ち時間をおく（単位は 1 = 1000分の1秒）
await 10
//情報の取得と画面出力をくりかえし実行できるように処理の先頭へもどる
goto *top
【このプログラムに使用する画像】
・番組画像 (400*250) ３種類
下にある画像上にマウスカーソルをあて右ボタンで「名前をつけて画像を保存」 bangumi1.png bangumi2.png bangumi3.png して、作成したプログラム test.hsp と同じフォルダ内に配置します
bangumi1.png
bangumi2.png
bangumi3.png
その4 【テレビのようなレイアウトのプログラムをつくる場合】
センサーボード（スイッチ,LED）対応バージョン
#include "hsp3dish.as"
#include "rpz-gpio.as" //センサーボード専用命令を使うときはこの一行を追加する
//プログラムに使用する画像を読み込んでおく
celload "mouse.png",1
celload "bangumi1.png",11
celload "bangumi2.png",12
celload "bangumi3.png",13
//現在のチャンネル番号
chan = -1
//スイッチが初めて押された瞬間を区別する変数（フラグ） 0 なら初めて。1なら経験済
// これがないとスイッチを押したときチャンネルが連続で変わり続けてしまう
sw1hajimete = 0
sw2hajimete = 0
//状態は常に変化する可能性があるので毎回処理を実行しつづける構造になっています
*top
//キーが押されているか調べて状態を取得する
//メインキーボード1のキー
getkey key1,49
//メインキーボード２のキー
getkey key2,50
//メインキーボード3のキー
getkey key3,51
//マウスの左ボタン
getkey keym1,1
//テンキー1のキー
getkey keyt1,97
//テンキー２のキー
getkey keyt2,98
//テンキー3のキー
getkey keyt3,99
//マウスの座標を取得する
myx = mousex
myy = mousey
//センサーボードのスイッチの状態を取得する
sw1 = gpioin(5)
sw2 = gpioin(6)
//画面に表示する内容をすべて用意して、できたら画面に出力する（更新）
//いったん画面への出力をとめておく
redraw 0
//画面背景を塗る
color 0,0,255
boxf
//番組映像エリアを描画
color 80,80,80
boxf 120,50,120+400,50+250
//チャンネルボタン1を描画
color 100,100,100
boxf 45,360,45+150,360+80
color 255,255,255
pos 45+70,360+30
mes "1"
//チャンネルボタン2を描画
color 100,100,100
boxf 245,360,245+150,360+80
color 255,255,255
pos 245+70,360+30
mes "2"
//チャンネルボタン3を描画
color 100,100,100
boxf 445,360,445+150,360+80
color 255,255,255
pos 445+70,360+30
mes "3"
//文字の色を指定して、文字で情報を表示
color 255,255,255
pos 0,0
mes myx
mes myy
mes key1
mes key2
mes key3
mes keym1
mes keyt1
mes keyt2
mes keyt3
mes sw1
mes sw2
//マウスがクリックできる領域上の位置にいるか判定する
sel = -1
if myx > 45 && myx < 195 && myy > 360 && myy < 440 { sel = 1 } if myx > 245 && myx < 395 && myy > 360 && myy < 440 { sel = 2 } if myx > 445 && myx < 595 && myy > 360 && myy < 440 { sel = 3 } //なにかの領域上にいるなら情報を表示 if sel > -1 { pos 300,0 : mes "On " + sel } else { pos 300,0 : mes "Non" }
//なにかの領域上にいる最中に、マウス左ボタンが押された場合は、特定の処理（チャンネルをセット）を実行する
if sel > -1 && keym1 = 1 { chan = sel }
//センサーボードのスイッチが押されていたらチャンネルを変える（スイッチは押されると0になるので注意！）
if sw2hajimete = 0 && sw2 = 0 {
a = -1
if chan = -1 { a = 1 }
if chan = 1 { a = 2 }
if chan = 2 { a = 3 }
if chan = 3 { a = -1 }
chan = a
sw2hajimete = 1
}
if sw1hajimete = 0 && sw1 = 0 {
a = -1
if chan = -1 { a = 3 }
if chan = 1 { a = -1 }
if chan = 2 { a = 1 }
if chan = 3 { a = 2 }
chan = a
sw1hajimete = 1
}
//センサーボードのスイッチが離されていたらフラグを0にもどす（スイッチは離されると1になるので注意！）
if sw2 = 1 { sw2hajimete = 0 }
if sw1 = 1 { sw1hajimete = 0 }
//チャンネルがセットされていればその番組を表示する
housoukyoku = ""
bangumi = ""
if chan > -1 {
if chan = 1 { housoukyoku = "[ 1:MHK ]" : bangumi = "朝の連続ドラマ： こものなかからの人生"}
if chan = 2 { housoukyoku = "[ 2:TOKYO ]" : bangumi = "アニメ： うずまき乾電池ボルト" }
if chan = 3 { housoukyoku = "[ 3:NIPPON ]" : bangumi = "お笑いバラエティ： ひょっとこさん" }
//番組画像を表示
gmode 0
pos 120,50
celput 10+chan
}
pos 120,50 : mes housoukyoku : mes bangumi
//マウスカーソルを表示
gmode 2
pos myx,myy
celput 1
//画面に出力実行
redraw 1
//現在のチャンネルの数にあわせてセンサーボードのLEDをつける
gpio 17,0 : gpio 18,0 : gpio 22,0 //いちどぜんぶ消してから
if chan = 1 { gpio 17,1 }
if chan = 2 { gpio 17,1 : gpio 18,1 }
if chan = 3 { gpio 17,1 : gpio 18,1 : gpio 22,1 }
//すこし待ち時間をおく（単位は 1 = 1000分の1秒）
await 10
//情報の取得と画面出力をくりかえし実行できるように処理の先頭へもどる
goto *top
【このプログラムに使用する他のファイル】
・rpz-gpio.as
作成したプログラム test.hsp と同じフォルダ内に配置しておく必要があります。
※ rpz-gpio.as は 2018年10月現在一般公開されていません。今後公開されると思います。
その5 【テレビをもとにして クイズゲームを作ってみる例】
これはレイアウトだけです。なかみのプログラムはありませんので、自分で作ってみましょう。
必要な部分を付け加えていき、使わないプログラムの部分は消してしまっても大丈夫です。
自分でプログラムを作るときは自由な順番で、自分の好きなように作ることができます。
画像はあとから入れ替えたりするのが簡単にできるので、きれいな画像を作成するのは別の日にまとめてやることにして、まずはプログラム作成に集中するのもよいかもしれません。
plate.png
bg.jpg
animal1.jpg
#include "hsp3dish.as"
#include "rpz-gpio.as" //センサーボード専用命令を使うときはこの一行を追加する
//プログラムに使用する画像を読み込んでおく
celload "mouse.png",1
celload "bangumi1.png",11
celload "bangumi2.png",12
celload "bangumi3.png",13
celload "bg.jpg",20
celload "plate.png",30
celload "animal1.jpg",40
//現在のチャンネル番号
chan = -1
//スイッチが初めて押された瞬間を区別する変数（フラグ） 0 なら初めて。1なら経験済
// これがないとスイッチを押したときチャンネルが連続で変わり続けてしまう
sw1hajimete = 0
sw2hajimete = 0
//状態は常に変化する可能性があるので毎回処理を実行しつづける構造になっています
*top
//キーが押されているか調べて状態を取得する
//メインキーボード1のキー
getkey key1,49
//メインキーボード２のキー
getkey key2,50
//メインキーボード3のキー
getkey key3,51
//マウスの左ボタン
getkey keym1,1
//テンキー1のキー
getkey keyt1,97
//テンキー２のキー
getkey keyt2,98
//テンキー3のキー
getkey keyt3,99
//マウスの座標を取得する
myx = mousex
myy = mousey
//センサーボードのスイッチの状態を取得する
sw1 = gpioin(5)
sw2 = gpioin(6)
//画面に表示する内容をすべて用意して、できたら画面に出力する（更新）
//いったん画面への出力をとめておく
redraw 0
//画面背景を塗る
//color 0,0,255
//boxf
//背景画像を描画
gmode 0
pos 0,0
celput 20
//番組映像エリアを描画
color 80,80,80
boxf 120,50,120+400,50+250
//チャンネルボタン1を描画
//color 100,100,100
//boxf 45,360,45+150,360+80
pos 45,360
celput 30
color 255,255,255
pos 45+70-22,360+30
mes "コアラ"
//チャンネルボタン2を描画
//color 100,100,100
//boxf 245,360,245+150,360+80
pos 245,360
celput 30
color 255,255,255
pos 245+70-50,360+30
mes "ウォンバット"
//チャンネルボタン3を描画
//color 100,100,100
//boxf 445,360,445+150,360+80
pos 445,360
celput 30
color 255,255,255
pos 445+70-68,360+30
font "",16,0
mes "タスマニアンデビル"
font "",18,0
//文字の色を指定して、文字で情報を表示
color 255,255,255
pos 0,0
//mes myx
//mes myy
//mes key1
//mes key2
//mes key3
//mes keym1
//mes keyt1
//mes keyt2
//mes keyt3
//mes sw1
//mes sw2
//マウスがクリックできる領域上の位置にいるか判定する
sel = -1
if myx > 45 && myx < 195 && myy > 360 && myy < 440 { sel = 1 } if myx > 245 && myx < 395 && myy > 360 && myy < 440 { sel = 2 } if myx > 445 && myx < 595 && myy > 360 && myy < 440 { sel = 3 } //なにかの領域上にいるなら情報を表示 //if sel > -1 { pos 300,0 : mes "On " + sel } else { pos 300,0 : mes "Non" }
//なにかの領域上にいる最中に、マウス左ボタンが押された場合は、特定の処理（チャンネルをセット）を実行する
if sel > -1 && keym1 = 1 { chan = sel }
//センサーボードのスイッチが押されていたらチャンネルを変える（スイッチは押されると0になるので注意！）
if sw2hajimete = 0 && sw2 = 0 {
a = -1
if chan = -1 { a = 1 }
if chan = 1 { a = 2 }
if chan = 2 { a = 3 }
if chan = 3 { a = -1 }
chan = a
sw2hajimete = 1
}
if sw1hajimete = 0 && sw1 = 0 {
a = -1
if chan = -1 { a = 3 }
if chan = 1 { a = -1 }
if chan = 2 { a = 1 }
if chan = 3 { a = 2 }
chan = a
sw1hajimete = 1
}
//センサーボードのスイッチが離されていたらフラグを0にもどす（スイッチは離されると1になるので注意！）
if sw2 = 1 { sw2hajimete = 0 }
if sw1 = 1 { sw1hajimete = 0 }
//チャンネルがセットされていればその番組を表示する
housoukyoku = ""
bangumi = ""
//クイズ用問題表示
housoukyoku = "【問題】 " : bangumi = "この どうぶつ の なまえは ？"
gmode 0
pos 120,50
celput 40
if chan > -1 {
if chan = 1 { housoukyoku = "[ 1:MHK ]" : bangumi = "朝の連続ドラマ： こものなかからの人生"}
if chan = 2 { housoukyoku = "[ 2:TOKYO ]" : bangumi = "アニメ： うずまき乾電池ボルト" }
if chan = 3 { housoukyoku = "[ 3:NIPPON ]" : bangumi = "お笑いバラエティ： ひょっとこさん" }
//番組画像を表示
gmode 0
pos 120,50
celput 10+chan
}
pos 120,50 : mes housoukyoku : mes bangumi
//マウスカーソルを表示
gmode 2
pos myx,myy
celput 1
//画面に出力実行
redraw 1
//現在のチャンネルの数にあわせてセンサーボードのLEDをつける
gpio 17,0 : gpio 18,0 : gpio 22,0 //いちどぜんぶ消してから
if chan = 1 { gpio 17,1 }
if chan = 2 { gpio 17,1 : gpio 18,1 }
if chan = 3 { gpio 17,1 : gpio 18,1 : gpio 22,1 }
//すこし待ち時間をおく（単位は 1 = 1000分の1秒）
await 10
//情報の取得と画面出力をくりかえし実行できるように処理の先頭へもどる
goto *top
プログラムを作成するコツ：
・いまから新たに作りたいと思うプログラムの部分を、なるべく小さくしぼりこむ。（作るものを小さい部分別に切り分けて取り組む）
・自分がいま作っているのはなにをする部分かしっかり意識する。
・小さい一箇所だけをプログラムに追加して、正しく動くか実行して自分の目で確認してみる。もし自分の実現したい結果とちがっていたら直して、もういちど確認する。
・以上の「小さなプログラム」の 付け足し作業 を繰り返していく。
ここで紹介している「ひながた」は、できるかぎり「わかりやすく」を目指して書かれています。
「つくりたいものをまずカタチにする」ことを第一にしているため、プログラムの品質としては、むだな部分があったり非効率な部分があったりします。
もし「これはもっとこうしたほうがよいのでは」という部分に気がついたら、遠慮なく、配列 や 繰り返し命令 やgosub などを使ってよりよいプログラムに改造していってもらいたいと思います。