教育情報活用特論 - 兵庫教育大学｜hyogo ... · 情報技術のため学習体系 •...
TRANSCRIPT
2007/2/16 1
教育情報活用特論
2006年度後期
コンピュータはどのようにして動いていますか？コンピュータはどのような命令を聞くことができますか?コンピュータのゲームはどのようにしてつくられていますか？グラフィックスなど仮想の世界はどのようにしてできていますか？
2007/2/16 2
内容
１．オリエンテーション
教育情報に関連する情報技術
２．グラフィックスDoGA,VRML,HSP,OpenGL
３．HSPを使ったプログラミング
３．１ プログラムの基礎学習
３．２ 作品の製作
３．３ 発表
2007/2/16 3
情報技術のため学習体系• 情報科学基礎
• プログラミング基礎
– 構造化プログラミングとオブジェクト指向プログラミング
• アーキテクチャ、ハード
– 論理回路
• アルゴリズムと計算量
• オペレーティングシステム
– 資源管理、並列処理、メモリ管理
• 情報ネットワーク、インターネット、TCP/IP• ヒューマンインタフェース、ユーザインタフェース
• コンピュータグラフィックス
• 人工知能、知識処理
• データベース、データモデリング
• ソフトウエアエンジニアリング
• 社会と技術
– 技術者倫理、社会の諸問題
2007/2/16 4
• 情報科学基礎
• インターネットの仕組み、ネットワーク
– LAN、IPアドレス、TCP/IPプロトコル,IPv6
• サーバ構築管理運営
– Linux,Apache,TOMCAT, 2000サーバ
• Webシステム構築
– CGI,サーバサイドプログラミング（JSP,ASP)、掲示板、アンケート
– データベース（PostGreSQL,MySQL)– ビデオオンデマンドシステム
• ストリーミングサーバとコンテンツ教材
• グループウエア
• プログラミング
– HTML,JavaScript,コンパイラ言語、軽量言語（Perl,Ruby,PHP,Squeak、ドリトル,….)• コンテンツ、教材作成、e-Learning
– HP作成ソフト、オーサリングソフト
– 学習管理システムLMS標準化規格SCORM、LOM（Learning Object Metadata)– ビデオ編集、マルチメディア統合化（SMIL)– XML（eXtended Markup Language),XHTML
• 正規表現
• CG– OpenGL、VRML、ペイントソフト、アニメーションソフト、HSP
• WebアクセシビリティJIS規格
• 著作権
（教育情報活用に役立ちそうな）情報技術
2007/2/16 5
プログラミング言語
• 実行方式による分類– コンパイラ型：処理速度が速いがプログラム修正は面倒
• C/C++• Java• Pascal• COBOL• FORTRAN など
– インタプリタ型：プログラム修正は手軽だが処理速度は遅い• JavaScript• Perl• Ruby• PHP• BASIC など
2007/2/16 6
スクリプト言語、簡易言語、LightWeight Language
• テキストエディタで書ける
• 構文がやさしい
• 型宣言などの規制がゆるい
• 実行が簡単
• フリーで入手可能
• Windows,Unix,Linuxなど各種OSで動作する
• 実用的なライブラリが揃う日経ソフトウエア：「スクリプト言語まるごとブック」より
2007/2/16 7
スクリプト言語/マクロ言語いろいろ
日経ソフトウエア：「スクリプト言語まるごとブック」より
アプリ・マクロ•VBA•LotusScript•PlayRiteetc
ユニーク•Squeak•ドリトル•ひまわり/なでしこetc
汎用•Perl•Ruby•Pyson•Groovy•Awk•REXXetc
Web開発•JavaScript•PHP•Curletc
リスト処理•Lisp•Schemeetc
OS標準•WSH•AppleScript•バッチファイル•シェルスクリプトetc
ゲーム作成•HSP•吉里吉里/KAGetc
2007/2/16 8
コンピュータグラフィックスと画像処理
画像処理（IP)とコンピュータグラフイックス（CG)
外界計算機
処理
２次元と３次元
IPは２次元データの入力解析処理
CGは２次元または３次元のデータ処理
IP
CG
取り込み
提示
2007/2/16 9
CG
基本機能 3次元グラフィックスライブラリ:（例）OpenGL１．グラフィックスプリミティブの描画（点、線分、多角形など）
２．座標変換（図形座標の変換、視点座標の変換）
３．色と照明の設定
４．テクスチャマッピング
５．色の変調・混合処理
６．セレクション機能（対話的図形選択）
応用各種可視化、シミュレーション、VR（Virtual Reality)
2007/2/16 10
IP
• 応用分野1. 食品、医薬品選別検査
2. 文字認識（OCR)、ラベル検査
3. 交通計測、自動車番号読み取り
4. 個人識別
5. 医用分野（CT)6. 監視、モニター
7. 非破壊試験
8. 感覚量検査（官能検査）
9. 動画像処理
10. ３次元物体検出
11. ロボットビジョン
• 基本機能
1. ２値化処理
2. 平滑化処理
3. 濃度変換
4. コントラスト変換
5. 膨張収縮
6. エッジ検出
7. 線分抽出
2007/2/16 11
ＩＰとCGの応用分野の木（比較）
ＩＰ CG
2007/2/16 12
３次元CGを体験
使ってみよう・作ってみよう
• アニメーション作成ソフトDoGA－E1
• Webブラウザ向き言語VRML(Virtual Reality Modeling Language)
• インタープリタ型言語HSP（Hot Soup Processor）
• ライブラリー型（C言語やJava言語などから呼び出して使う形)OpenGL
以下のような分類の中からおのおのひとつだけ紹介する。
2007/2/16 13
DoGAーE1を体験
• 学校教育向けCGアニメの入門ソフト
• 詳細は以下のアドレスを参照してください。説明ビデオもあります。http://doga.jp/2005/education/index.html
• サンプルのデモ提示
2007/2/16 14
VRMLを体験
• VRML(Virtual Reality Modeling Language)1.VRMLサンプルの例示(ブラウザ上で動く)2.VRMLの構造
3.VRMLビューワとブラウザ：ダウンロードしよう– Cortona:http://www.cai.com/cosmo/– Cosmo Player:www.parallelgraphics.com/downloads/
４．サンプルデータ（Download可)http://www.life.hyogo-u.ac.jp/ina/VRML/kanransha.lzh
2007/2/16 15
HSPを使ってみよう開発者のページより• ＨＳＰは、絵が動く、音が出る、反応するなど、興味を失なうこ
となく継続して学習することのできる要素を手軽に実践することができます。楽しみながら実践することのできる敷居の低さと、コンピューター動作の基本を押さえた言語の仕様こそがＨＳＰの魅力であり、またIT教育に最適であると考える理由でもあります。もちろん、無料で利用できることや導入の手間が少ないこと、参考書やWEB上の資料が充実しているという点も挙げられますが、実際に小中学生を始めとした若い世代で多く利用されている現状からも、「楽しく学ぶこと」への意義をアピールしていきたいと考えています。
• 平成１７年度の 「ＩＴクラフトマンシップ・プロジェクト」(経済産業省) に採択された「スーパープログラマーを育てる！」プロジェクト学習教材としてHSPが採用されました。小中学生がHSPを通して、基礎からプログラミングを学んでゆく大きな試みです。 (2005/07/12)
2007/2/16 16
ＨＳＰとは? • ダウンロードアドレス
http://www.onionsoft.net/hsp/Hot Soup Processor(ホットスーププロセッサ、略
称HSP)は、プラットフォームが持つ機能をより手軽にダイレクトな形で引き出すためのツールとして、1994年から開発が開始され1996年以降フリーウェアとして公開されているプログラミングツールです。BASIC言語をベースに、アマチュア向けのツールとして広いユーザー層と、認知度を得ています。主として個人用、オンラインソフトのゲームやツール開発に利用することができ、目的が商用、非商用にかかわらずライセンス料や、サポート費用は必要なく無料で使うことができます。
2007/2/16 17
教育現場でのHSPの使い方HSPはゲーム作成やグラフィックに強いですが、もともとは単なる一つのコ
ンピュータ（簡易）言語です。これによって何が可能になるのか？はコンピュータで何ができるのか？と問うこととほぼ同等です。したがってそれをどう生かすかは学んだ人それぞれの考え方次第です。
私なりに教育現場を想定した場合以下のような使い方が思い浮かびました。皆さんはいかがでしょうか?
• プログラミング教育・アルゴリズム教育• ゲーム、アニメ作り• 絵本や物語の作成• 数学関数、空間図形の作画、可視化
• 各種視聴覚教材、シミュレーション教材の作成• CAI教材作り、算数数学の計算問題ドリル、図形問題、シミュレーション可視化• 空間図形や美術における、視点と見え方、透視図の学習教材、色彩の学習教材• その他アイデアは？ないか
作品制作に向けて考えてみてください
2007/2/16 18
HSPの導入• HSP3.0のインストールをしてください。
残有ディスク容量の少ない方は外部媒体（USBメモリ)に入れてください。
［学習資料］• 入門編
– インストールしたDIR/docs/beginner/index.htmまたはhttp://www.life.hyogo-u.ac.jp/ina/HSP/beginner.htm
• マニュアル– インストールしたDIR/docs/hspprog.htm
またはhttp://www.life.hyogo-u.ac.jp/ina/HSP/hspprog.htm• 教材サンプル（ダウンロード解凍）
– http://www.life.hyogo-u.ac.jp/ina/HSP/2006sample.lzh［参考書］• HSP３プログラミング入門,おにたま・他著, 秀和システム など多数
2007/2/16 19
スクリプトエディタとサンプルスクリプト
hsped3.exe の実行
サンプルプログラムの参照と実行
2007/2/16 20
基礎学習■導入での学習内容・ＨＳＰの導入、スクリプトエディタの使い方、四角形の表示と消去、色の設定、ヘルプの使い方（コマンド名：screen, cls, stop, color, boxf, repeat-loop, getkey, if, wait)
■学習内容・変数の利用、画像ファイルの表示、文字列の表示、カレントポジションの設定、ラベル（飛び先）の付加、ボタン設定、外部プログラムの実行、条件判断、入力ボックス、乱数、フォント指定、文字配列、配列、ダイアログ表示、ボタンサイズ
（コマンド名：piclopad,mes,print,pos,goto,button,end,exec,if-else, input, rnd, randomize, font, sdim, dim, dialog, objsize）
・サウンドプレイ(mmload,mmplay,mmstop)・マルチメディアコントロールMCI(mci)・時計、時間,時間待ち(gettime, await)・スクリーンセーバー(bgscr)・シューティングゲーム・ビジュアルノベル・RPG、マップの表示、キャラクタの表示
HSP入門編 ：http://hsp.tv/make/enroll.html HSP講座 ：http://null.main.jp/hsp.html
2007/2/16 21
HSP学習のポイント
• コメント(;をつける)• 文字表示(mes,print)• 画像表示(picload)• 基本図形作画（pset,line,boxf,circle)• サウンド再生
(mmload,mmplay,mmstop)• 計算(+,-,*,/,¥)• 乱数(rnd)• 変数• 配列(dim)• 画面クリア(cls)• スクリーン(screen)• 裏のスクリーン(buffer,bgscr)• ボタン(button)• ラベル付け(*xxxxxx)• 分岐(if)• 繰返し(goto,repeat~loop)
• 時間待ち(wait,await)• ジャンプ（goto)とサブルーチン(gosub-return)• 入力ボックス(input)• ダイアログボックス（ファイル、カラー選択）• 画像や文字を動かす• 移動と反射• キーイベントとマウスイベントの取得(stick)• カーソルキーで絵を動かす• システム変数(cnt、mousex,mousey、refstr、
stat、ginfo_dispx, ginfo_dispy、ginfo_winx, ginfo_winy、dir_cmdline、rval,gval,bval、など)
• アニメーションの作成• チラつき防止再描画制御(redraw)• スクリーンセーバー• [F1]キー(ヘルプ)• [ALT]+[F4]キー(強制終了)
2007/2/16 22
入門編での学習http://hsp.tv/make/enroll.html
2007/2/16 23
□HSP入門編：http://hsp.tv/make/enroll.html・スクリプトに旗を立てよう・これがランチャー?! ・変数を使ってみよう・さらに高度な条件判断
□HSP講座：http://null.main.jp/hsp.html・もし...(if文の書き方)・繰り返し処理とwait制御・カレントポジション (pos命令)・サブルーチン・様々なダイアログ (dialog命令) ・onexit命令による終了時処理・実行ファイル(*.exe)の作り方・乱数の利用 (rnd命令)・簡易描画命令 (pset,line命令)・補足事項 (インクリメント・デクリメント)
+++ HSPオブジェクト編 +++ ・オブジェクトの操作、ボタン (button命令)・入力ボックス(input命令)・チェックボックス(chkbox命令)・コンボボックスとリストボックス(combox、listbox命令)・メッセージボックス(mesbox命令)
□HSP教室 [入門編][実践編] http://hspcenter.com/hspsc3/hspsc1.htmlhttp://hspcenter.com/
・ブロック崩し、ファイル選択、ほか・マップとマップエディタ、キャラクタ・アニメーション、スクリーンセーバ
2007/2/16 24
HSP教室[入門編] での学習http://hspcenter.com/hspsc3/hspsc1.html
2007/2/16 26
HSP講座での学習http://null.main.jp/hsp.html
2007/2/16 27
学習内容（１）
• エクスプローラ（マイコンピュータ）での拡張子の表示• 四角形の作画と移動
– 変数の利用– ボールの移動１– ボールの移動２(samp1-1.hsp,samp2.hsp)
• 実行形式（.exe)ファイルの作成• 画像の表示(picload)• フォントと文字列の表示(mes,print,font,text)• 円の面積計算
– HSP3では実数がそのまま扱える
– 混合演算では、最初の項のデータ型に自動的に合わせられる
• サブルーチン(gosub-return)gotoと似ているがgotoにはreturn命令がない
2007/2/16 28
mesbox,chkbox,listbox,comboxobjsel,clrobjsdimnoteselnoteloadnotesaveboxfbuffergcopygmoderedrawstickabs関数
gselpeekbgscrHELP環境（F1キー）
rnd,randomizeinputfont配列
dimrepeat~loopgosub~returngettimewait,awaittitlescreendialogシステム変数stat,refstrobjsizebmpsavemmload,mmplay,mmstop
picloadstopclsmes*ラベル名(旗)gotobuttonposcolorexec変数、代入
コメント
四則演算
文字列
if、条件文
よく使われる主要な命令等一覧
2007/2/16 29
移動反射するボールダウンロード sample1-1.hsp
screen 0,400,300,0cls 4size=6 ; ボールの大きさx=200:y=150dx=2:dy=2repeat
gosub *ballmovegosub *ballputwait 1
loop; ボールの移動*ballmove
y=y+dy : x=x+dxif y<0 : y=0 : dy=-dy ; 以下4 行はボールがif x<0 : x=0 : dx=-dx ; 壁に当たった場合の処理if x>400 : x=400 : dx=-dx ; ginfo_winxif y>300 : y=300 : dy=-dy ; ginfo_winyreturn
; ボールの表示*ballput
color 0,0,0 : boxf xx,yy,xx+size,yy+sizecolor 255,255,255 : boxf x,y,x+size,y+sizexx=x : yy=yreturn
ボール移動は“消して”、“描く”を繰り返すことで実現
2007/2/16 30
学習内容（２）ダウンロード kazuate.hsp
• ラベル• ボタン(pos,goto)
screen 0,200,100,0randomizekazu=1
*starthen=rnd(5)hen=hen+1pos 0,0mes "1から5の数は？"input kazubutton "OK",*handanstop
*handanclsif kazu=hen:goto *atarihen=str(hen)pos 0,70mes hen+"です。違いました"goto *start
*atariclshen=str(hen)pos 0,70mes hen+"です。あたり"goto *start
2007/2/16 31
学習内容（３）ダウンロード sample1-2.hsp
• カーソルによるオブジェクト移動;押下キーの検知方法stick kk,143,1if kk&1:xr-- ;←キーif kk&2:yr-- ; ↑キーif kk&4:xr++ ;→キーif kk&8:yr++ ; ↓キーif kk&128:end ;ESCキー
• 条件判断(if)• 繰り返し(repeat-loop)• 乱数(randomize,rnd)
1 : カーソルキー左(←)2 : カーソルキー上(↑)4 : カーソルキー右(→)8 : カーソルキー下(↓)
16 : スペースキー32 : Enterキー64 : Ctrlキー128 : ESCキー256 : マウスの左ボタン512 : マウスの右ボタン1024 : TABキー
赤のボールはカーソルキーで移動制御する
2007/2/16 32
screen 0,400,300,0randomizecls 4size=6 ; ボールの大きさx=0y=0dx=2:dy=2xr=rnd(400)yr=rnd(300)repeat
gosub *keychkcolor 255boxf xr,yr,xr+size,yr+sizexxr=xr:yyr=yrgosub *ballmovegosub *ballputwait 1color 0boxf xxr,yyr,xxr+size,yyr+size
loop
;キーチェック*keychk
stick kk,143,1if kk&1:xr--if kk&2:yr--if kk&4:xr++if kk&8:yr++if kk&128:end
if xr<0:xr=0if yr<0:yr=0if xr>400-size:xr=400-sizeif yr>300-size:yr=300-sizereturn
; ボールの移動*ballmove
y+=dy : x=x+dxif y<0 : y=0 : dy=-dy ; 以下4 行はボールがif x<0 : x=0 : dx=-dx ; 壁に当たった場合の処理if x>400 : x=400 : dx=-dxif y>300 : y=300 : dy=-dyreturn
; ボールの表示*ballput
color 0,0,0 : boxf xx,yy,xx+size,yy+sizecolor 255,255,255 : boxf x,y,x+size,y+sizexx=x : yy=yreturn
2007/2/16 33
練習問題
ボールの反射プログラム(slide２８)を参考にして以下
のプログラムを作成してください。
１．与えた文字列がスクリーンの左右で反射するプログラム
２．与えた文字列が右から左に電光掲示板のように移動し、左から消えた文字は再度右端から現れるプログラム
参考： チラつき防止とredraw命令
2007/2/16 34
学習内容（４）• 配列• ダイアログボックス• CGビューワ• サウンドプレイ• ディジタル時計• スクリーンセーバー• シューティングゲーム• ビジュアルノベル• アニメ• (RPG（Role Playing Game))• (マップ)• (スプライト機能)• (キャラクタの移動)• (衝突判定)
この順で学習します。
2007/2/16 35
その他の役立つ命令
• サイズ変更objsize• テキストファイルのロードとセーブ
（メモリノートパッド命令）notesel bufnoteload "test.txt"notesave "test.txt"
• メモリバッファ使用alloc• バイナリファイルの入出力bload,bsave命令• peek/poke命令
2007/2/16 36
配列（変数のアパート/マンション/ウサギ小屋）
dim a,5 ;1次元配列（５軒分）
a(0)=1：a(1)=2：........：a(4)=5
dim a,10,5 ;２次元配列
a(0,0)=1:a(1,0)=2:a(2,0)=3:……:a(9,0)=9……a(0,4)=41:a(1,4)=42:…………..:a(9,4)=50練習１：1次元配列a(100)の要素に1から100までの整数を入
れるプログラム
練習２：２次元配列a(10,5)の要素に1から50までの整数を入れるプログラム
練習３：20個のボールを配置し壁反射させるプログラム
2007/2/16 37
dialog boxCGビューワ dialog.hsp
dialog命令の書式：dialog "option1",タイプ,"option2" タイプ : 内容
-----------------------------------------------------0 : 標準メッセージボックス + [OK]ボタン1 : 警告メッセージボックス + [OK]ボタン2 : 標準メッセージボックス + [はい][いいえ]ボタン3 : 警告メッセージボックス + [はい][いいえ]ボタン16 : ファイルOPEN(開く)ダイアログ17 : ファイルSAVE(保存)ダイアログ32 : カラー選択ダイアログ(固定色)33 : カラー選択ダイアログ(RGBを自由に選択)
dialog "本当に終了しますか?",0,"確認"dialog "大変だ",1,"dialog"dialog "保存しますか？",2,"dialog"dialog "エラーです",3,"dialog"dialog "jpg",16,"jpg画像ファイル"if stat=0 : endpicload refstrdialog "bmp",17,"BMP画像ファイル"dialog "jpg",32,"カラー選択"
システム変数：
stat =0:cancel =1:正常選択
refstr 選択されたファイル名
選択したカラーはシステム変数:
ginfo_r,ginfo_g,ginfo_b
でゲット可
システム変数:stat１：OK,６：はい,７：いいえ
2007/2/16 38
メディアプレイ; マルチメディアプレイヤー sndplayer.hsp, jan.wav
*modoruscreen 0,320,330cls 4objsize 320,30pos 0,240button "読み込み",*yomi ; 「読み込み」ボタン配置button "再生",*play ; 「再生」ボタン配置button "終わり",*owari ; 「終わり」ボタン配置stop
*playpos 0,0 ; avi再生のための座標mmplay 0 ;snd 0stop
*yomidialog "wav;*.mid;*.avi",16,"メディアファイル" ; 読み込みダイアログif stat=0 : goto *modoru ; キャンセル判断mmload refstr,0 ;sndload refstr,0 ; 画像読み込みstop
*owarimmstop ;sndoffend
2007/2/16 39
ディジタル時計tokei.hsp
d1=gettime(0); 年を取得
d2=gettime(1); 月を取得
d4=gettime(3); 日を取得
d3=gettime(2); 曜日(0～6)を取
得
t1=gettime(4); 時を取得
t2=gettime(5); 分を取得
t3=gettime(6); 秒を取得
screen 0,240,40; 今日の曜日を表示; gettime命令で曜日を取得し表示する。
sdim day,16,7 ; 一週間の文字データday.0="日曜日":day.1="月曜日":day.2="火曜日"day.3="水曜日":day.4="木曜日":day.5="金曜日"day.6="土曜日"d1=gettime(0) ; 年を取得d2=gettime(1) ; 月を取得d4=gettime(3) ; 日を取得d3=gettime(2) ; 曜日(0～6)を取得mes "今日は、"+d1+"年"+d2+"月"+d4+"日"mes "["+day.d3+"] です。" ; 年、月、日、曜日を表示
; 現在時刻をタイトルに表示; 1秒ごとに内容を更新しながら表示します。
repeatt1=0:t2=0:t3=0t1=gettime(4) ; 時を取得t2=gettime(5) ; 分を取得t3=gettime(6) ; 秒を取得t1=str(t1):t2=str(t2): t3=str(t3) ; 文字列に変換time=t1+":"+t2+":"+t3 ; 文字列変数timeを設定title time ; タイトルの内容を更新wait 100 ; 1秒ウエイトするloop ; 無限ループ
2007/2/16 40
スクリーンセーバーsampsaver.hsp
s=dir_cmdlinea=peek(s,1) ; コマンドラインの2文字目を取り出すif a='p' : goto *sspre ; プレビューif a='s' : goto *ssproc ; フルスクリーンif a='c' : goto *sscfg ; コンフィグmes "Unknown switch ["+cmdline+"]"stop
;コマンドライン解析の解説*sscfg ; コンフィグ(設定画面)
cls 4font "HG創英角ゴシックUB",20picload "shasin.bmp",1tt="マイスクリーンセーバー"title tt:width 340,210:pos 8,100color 255,255,0pos 10,150:mes tt:mes "著作権者：伊奈諭"pos 230,40:button "OK",*ssendstop
*ssendend
*sspre ; プレビュー画面ax=ginfo_winx:ay=ginfo_winycls 4goto *prev
*ssproc ;フルスクリーン;画面の初期化ax=ginfo_dispx:ay=ginfo_dispybgscr 2,ax,ay,0cls 4
*prevrandomizecls 4size=6 ; ボールの大きさx=0:y=0:dx=2:dy=2xr=rnd(ax):yr=rnd(ay)repeat
gosub *keychkcolor 255:boxf xr,yr,xr+size,yr+sizexxr=xr:yyr=yrgosub *ballmovegosub *ballputwait 1color 0:boxf xxr,yyr,xxr+size,yyr+size
loop*keychk ;キーチェック
stick kk,143,1if kk&1:xr--:if kk&2:yr-:if kk&4:xr++:if kk&8:yr++if kk&128:endif xr<0:xr=0:if yr<0:yr=0:if xr>ax-size:xr=ax-sizeif yr>ay-size:yr=ay-sizereturn
*ballmove ; ボールの移動y+=dy : x=x+dxif y<0 : y=0 : dy=-dy ; 以下4 行はボールがif x<0 : x=0 : dx=-dx ; 壁に当たった場合の処理if x>ax : x=ax : dx=-dxif y>ay : y=ay : dy=-dyreturn
*ballput ; ボールの表示color 0,0,0 : boxf xx,yy,xx+size,yy+sizecolor 255,255,255 : boxf x,y,x+size,y+sizexx=x : yy=yreturn
2007/2/16 41
ビジュアルノベルvisual_novel.hsp
; ｳﾞｨｼﾞｭｱﾙ･ﾉﾍﾞﾙを作ろうscreen 0,400,320,0 ; ﾒｲﾝ画面の設定font "FixedSys",16,1 ; 文字を太くするobjmode 1 ; ﾎﾞﾀﾝ文字を"小"にする
; --- 場面１ ---*bamen1
clrobj ; ﾎﾞﾀﾝ等の消去picload "advcg01.jpg",0 ; 絵を読込み表示color 255,255,255 ; 文字色を白にしてpos 16,16 :mes "ここには台北。" ; 座標(16,16)から文章を表示mes " "mes "俺様「フ…朝靄にくもる台北もまた美しいさ」"pos 320,280 :button "西方を見る",*bamen2 ; 右下にﾎﾞﾀﾝ表示stop
; --- 場面２ ---*bamen2
clrobj ; ﾎﾞﾀﾝ等の消去picload "advcg03.jpg",0 ; 絵を読込み表示color 255,255,255 ; 文字色を白にしてpos 16,16 :mes "郊外が一望できる。" ; 座標(16,16)から文章を表示mes " "mes "俺様「人間は…人は…"mes " どこからきて、どこへゆくのだろう…」"pos 320,280 :button "正面を見る",*bamen1 ; 右下にﾎﾞﾀﾝ表示stop
2007/2/16 42
アニメを作る、動かすanime.hsp,anime.bmp,back.bmp
anime2.hsp１．背景とキャラクタを作成、重ね合わせ配置
する２．キャラクタの画像を切り替え表示する
”隠し画面”と”見える画面”の用意(buffer,screen)
”隠し画面”から”見える画面”への画像コピー(gcopy,gmode)
（参考フリーソフト）・イラスト作成(PictBear)・２Dキャラクタ作成（DotPainter ALFAR)・音声ファイル入手 ザ・ﾏｯﾁﾒｲｶァｽﾞhttp://kikyou.sakura.ne.jp/~osabisi/
512,512448,512384,512384,384192,3840,384
512,448448,448384,448384,192192,1920,192
512,384448,384384,384384,0192,00,0
anime.bmp
2007/2/16 43
anime.hsp解説
buffer 1 ;隠し画面(ID1)を用意するpicload “anime.bmp” ;隠し画面１にアニメ画像を読み込むbuffer 2 ;隠し画面(ID2)に背景を読み込みpicload "back.bmp"screen 0,480,320 ;見える画面(ID0)のサイズを設定gmode 2 ;透明色付きコピーにする
repeat ;*DRAWLOOPpos 0,0gcopy 2,0,0,480,320pos 0,0 ;pos 144,80gcopy 1,384,192*ANIM,192,192 ;gcopy 1,384,192*(ANIM/8),192,192ANIM=(ANIM+1) ¥ 2 ;ANIM=(ANIM+1) ¥ 16
wait 3loop ;goto *DRAWLOOP
2007/2/16 44
ゲームマップを作るmap.hsp,pcmon.bmp
dim MAP,16,16; 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4MAP(0,0) =1,1,1,1,1,1,1,0,1,1,1,1,1,1,1MAP(0,1) =1,0,0,0,0,0,0,0,0,0,0,0,0,0,1MAP(0,2) =1,4,1,1,1,1,1,1,1,1,0,1,1,0,1MAP(0,3) =1,0,1,0,0,0,0,0,1,0,0,0,1,0,1MAP(0,4) =1,0,1,0,1,1,1,0,1,0,1,0,0,0,1MAP(0,5) =1,0,1,0,1,0,0,0,1,0,0,0,1,0,1MAP(0,6) =1,0,1,0,1,1,1,0,1,1,1,1,1,0,1MAP(0,7) =0,0,1,0,0,0,0,3,0,0,0,0,0,0,0MAP(0,8) =1,0,1,1,1,0,1,1,1,1,1,0,1,0,1MAP(0,9) =1,0,0,0,0,0,0,0,1,0,0,0,1,0,1MAP(0,10)=1,1,1,1,1,1,1,0,1,0,1,0,1,0,1MAP(0,11)=1,0,0,0,0,0,0,0,1,0,0,0,1,0,1MAP(0,12)=1,0,1,1,1,1,1,0,1,1,4,1,1,0,1MAP(0,13)=1,4,0,0,0,0,0,0,0,0,0,0,0,0,1MAP(0,14)=1,1,1,1,1,1,1,0,1,1,1,1,1,1,1; 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4
なし=0
壁=1
エサ=2
自分=3
敵=4
2007/2/16 45
３Dの仮想世界はどのようにつくられていますか？
３D機能についてはHSP３とHSP2.6１以前では仕様変更が多くあるので注意と調査が必要。詳細はインストールしたディレクトリ/docs/hgimg3.ｔｘｔを参照のこと。
■３Dグラフィックス
・立方体の表示、回転と移動
・テクスチャマッピング
・３Dモデルの作成（３DAce,Metasequoiaなど）
・３Dモデルのモーション、アニメーション（Cyberdelia)
■その他ツール
・イラスト作成(PictBear)
・２Dキャラクタ作成（DotPainter ALFAR)
2007/2/16 46
まずは立方体を意のままに3d-box.hsp,btex.bmp
z：デフォルト視点
座標系、視点（の位置と向き）、光源（の位置と向き）を常に意識すること
HSPサンプルのHGIMG3カテゴリのtest1.hspを動かして理解しよう。
x
-y
o
y:デフォルト光源
2007/2/16 47
3Dモデル作成ツール
• 3DACE 作成モデルのMX形式出力http://hp.vector.co.jp/authors/VA017881/
• Metasequoia 作成モデルのMQO形式出力
http://www21.ocn.ne.jp/~mizno/metaseq/index.html• Cyberdelia MQO形式読込，MX／MA形式出力
http://www.cyberdelia.net/• MQO ー＞MX形式コンバータ
http://taillove.jp/mia/
2007/2/16 48
グラフィック作品の制作と観点
• HSPによるグラフィック作品の制作– グループまたは単独（自由)– HSPのグループ学習（基礎学習と練習）
– アイデアの企画、作品制作
– 発表
– 討論
• 作品の観点– 教育性
– ゲーム性
– ビジュアル性
– 娯楽性
– 発展性
2007/2/16 49
（私の）作品サンプル
• ヴィジュアル音声ノベル
• 音声スクリーンセーバー readerscr電光掲示＋読み上げ
合成音声出力モジュールはHSPとは別の製品であり、
そのままダウンロード利用できる形にできません。
• πの計算（モンテカルロ法）
monte.hsp
2007/2/16 50
作品作りのカテゴリ
• スクリーンセーバー• アニメーション• ボール運動• 関数可視化• 計算練習• シミュレーション• ヴィジュアル日記・ノベル• ゲーム（マップ型、対戦型）• ３D作品（ひょうちゃん、メタセコイアで作成、アニメ化）• その他いろいろ
2005年度の作品紹介(Download可)– http://www.life.hyogo-u.ac.jp/ina/HSP/2005sakuhin.lzh
2007/2/16 51
プログラム作品の提出と発表
含めてほしい内容
– 作品名（プログラム名）
– 作品の分類（カテゴリ）、目的
– 作品デモ
– 作品の機能と使い方の説明
– プログラムの内部説明（ソースレベル）、作り方の説明、ポイント
– アイデアと思うところ、セールスポイント、苦労したところ
• 作品の提出（ソースとパッケージ化実行ファイルを圧縮して電子メールで）
– プログラム本文に作品名、氏名をコメント記載
– ソース&実行ファイルを圧縮して添付 宛先：[email protected]– ソースファイル名 (namae).hsp、実行ファイル名 (namae).exeとする。
• Webから各作品のソースプログラムをダウンロード可能とする
– Webアドレス：http://www.life.hyogo-u.ac.jp/ina/HSP/2006sakuhin.lzh