プログラミングのhspってどんなことができるんだろう？
文字や図形を描くこともできるよ！
一緒に確認してみよう。
こんにちは。コメ吉です。
今回も引き続きプログラミングのHSPの使い方についてコメントさせて頂きます。
長男に教えてもらいながら、今回は文字や図形の表示についてチャレンジしてみます！
hsp 文字や図形の表示にチャレンジ！コード、座標の使い方も確認！
文字の表示については、前回も記事に取り上げましたが、今回はより詳しく取り上げていきたいと思います。
HSPの概要、導入まで
概要や、ダウンロード、導入までについては以下の記事にまとめていますので、ご参照頂ければ幸いです。
>>hsp プログラミングでゲームを作る！？ インストール、オリエンテーション編！https://comekichi.com/2023/03/04/hsp-プログラミングでゲームを作る！？-インストー/
また、以下はprocessingについてまとめた記事になりますのでご興味があればご覧下さい。
文字・図形の表示
ここでは、X座標・Y座標についてご説明します。
座標
座標については、マイクラや中学校の数学で習った、「関数」など、いろいろな場面で登場するような気がしていますが、
実は、この座標は今回のHSPなどでも、レイアウトなどを組み立てたりするうえでよく使われたりします。
X座標・Y座標は、関数でも使われたりする示したいものの場所を数値で示す値で、地球でいう経度・緯度のような役割を持つものです。（X座標は横・Y座標は縦の位置を示します。）
やり方が分かればすぐに使うことができるので、興味があればぜひトライしてみて下さい。
それでは、最初に以下のコード（posが座標を意味しています）をエディタに入力してみてください。
pos 200,100
mes “ハロー”
以下のようになれば大丈夫です。
上記のように実行してみると、何も座標をしていない時に比べて右下に文字が移動していることが分かります。
posという命令を使うことによって、表示したい文字を、自分の好きな場所に表示することができます。
改めて使い方を書きますと、
pos X座標、Y座標
というように入力するのですが、ここで２つ注意点があります。
座標の数値と表示位置の関係
①Y座標の見方 HSPの場合、X座標の数値を増やすと右にいきますし、Y座標を増やすと下に行きますということです。
↑こんなイメージを持つといいかもしれません。
命令の実行順
続いて注意しなければならないことが、「命令の実行順」になります。
ここでは、いったん、下のように入力してみてください。
mes “ハロー”
pos 200,100
そうすると、下のように表示されます。
なぜか、座標も 200, 10 と入力したはずなのに 0,0の場所に表示されてしまいますね。
実は、HSPは、原則ソースコードは上から下に実行されるようになっていて、今入力した座標というものは実行されていないからです。
Pos命令の場合、上に記述することで、下にある文字をどこ表示するか決めるのでposを先に入力する必要があります。
この考え方は、今後いろいろな場面で活用しますので覚えておくとよいかもしれません。
ウィンドウサイズを変更する
再び同じような話になりますが、X座標・Y座標を操作して文字の表示する位置を変更してみましょう。
pos 200,200
mes “麻婆豆腐”
上のように入力します。
実行すると、上のようになります。
１番最初（200, 100）のときよりY座標が高くなったため下に文字が下がりました。
ここまではウィンドウの枠内に収めるよう配置してきましたが、例えばゲームソフトなどを作ると、この枠内に文字が収まりきらない時があります。（何も枠の大きさを指定しない場合、X640Y480のサイズでウィンドウが開きます)
そんなときは、ウィンドウサイズを変更すると文字を入れる枠を拡大させることができます。
コードを以下のように入力(最初に入力)すると変更したい枠のサイズに変更できます。
width 指定したいX座標, 指定したいY座標
図形・ボタン・画像の配置/文字の色変更
最後に文字以外のレイアウトに必要なものの表示方法と文字の色を変更する方法を解説します。
図形の表示
図形の表示方法は、以下の通りです。boxfというコードを使います。
長方形<例>：
boxf 10,50,300,300
コードの意味は以下の通りです。（X座標とY座標の組み合わせが先ほどより複雑なので注意が必要ですね。）
今回は楕円を描きましたが③回目に書く座標と④回目に書く座標を同じにすれば円も同じように書けます。 🔽楕円では、4つの接点の座標を指定する。
画像の表示
画像は、以下のように（フォルダ名は任意です）入力することで表示されます。
ここではpicloadというコードを使います。
picload "C:\\フォルダ名\\フォルダ名\\画像ファイル名（拡ず張子含む）",1
留意事項として、
必ずHSPがインストールされているフォルダに画像を入れてから実行してください！（コメ吉も最初はHSPのフォルダに画像を入れてなくて表示させようとしたので、焦りました‥）
細かい点ですが、保存先のフォルダの階層を下げる時は、//でスラッシュを２つで区切ります。1つの場合、画像が読み込まれませんので注意が必要です。
画像ファイルを指定するとき、同じようにHSPのフォルダ (hsp36)から画像ファイルまでの道のりを指定しましょう。画像ファイルまでのフォルダの道のりを指定する場合、ファイルを最初から手で入力は大変なのでWindowsの「パスをコピー」機能が便利です。
画像の表示方法も含め、使い方は以下の通りです。
Windowsの「パスをコピー」機能
①表示したい画像を、[HSP36]という名前のフォルダに入れる
画像をまとめるためのフォルダを作ってもよいでしょう
②移動した画像ファイルを右クリックし、「パスのコピー」を選択
③エディタを開き、下のように記載します
実行すると、以下のように自分の表示したい画像が表示されます。
文字の色の変更
文字の色を変更する場合は、
color 0, 0, 255 mes "BLUE"
上記のように入力します。
実行するとしたのように表示されます↓
ちなみに 0, 0, 255というのは、右から順にRed, Green, Blueの3色の配色の割合ですので、どんな色になるのかお試し頂ければ幸いです。
ちなみに以下のサイトでコードごとの３色の割合を見ることができます。
RapidTables：RGBの割合を視覚的に確認できるサイトもたくさんあるのでぜひ確認してみてください。>>https://www.rapidtables.com/web/color/RGB_Color.html
今回は、HSPでいろいろなものを表示したりする方法をコメントしてきました。
少し長々とした説明になってしまいましたが、ご参考になれば幸いです。
次回からは、実際に動作するようなプログラムを作成していきたいと思います。
最後までお読み頂きありがとうございました。
以下コメ吉の関連記事になりますので、ご興味あればご参照下さい。
>>IT教育を紙のテキストで学ぶ！？ 通信教育で学ぶプログラミング講座の紹介！https://comekichi.com/2023/02/07/it教育を紙のテキストで学ぶ！？-通信教育で学ぶ/
>>ITスクール オンラインで受講可能な教室をチェック！ リスキリングに最適な講座をご紹介！https://comekichi.com/2022/12/18/itスクール-オンラインで受講可能な教室をチェッ/
コメント