0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

CODEraze使い方紹介 - GUIノード編

Last updated at Posted at 2025-02-06

ここでは主に画面作成に使用するノードについて紹介していきます。

スクリーンショット 2025-02-06 111520.png

背景などに使用できます。

スクリーンショット 2025-02-06 111749.png

箱のプロパティ欄が基本となっており
ほかのノードではこれらの設定以外の独自のプロパティを紹介していきます。
ここでは基本的なプロパティを紹介します。

名前は部品の名前を指定できます。

座標X(横軸)とY(縦軸)、Z(奥行)に数値を入力することで指定できます。

回転は部品の角度を指定できます。

透明度は部品の透明度を変更できます。

以下の画像は透明度を50、大きさを2、色を水色、横幅を100にしたものです。

スクリーンショット 2025-02-06 140312.png

大きさは部品の大きさを指定できます。

背景は部品の背景色を指定できます。

横幅は部品の横の幅を指定できます。

高さは部品の縦の幅を指定できます。

ボタン

画面にボタンの配置が行え、
プロパティ欄ではボタンの色や中の文字色やサイズを指定できます。

スクリーンショット 2025-02-06 112845.png

テキストボックス

画面にテキストボックスを配置できます。
スクリーンショット 2025-02-06 113355.png
プロパティ欄ではボタンの色や中の文字色、サイズや背景文字を指定できます。

画像

表示したい画像のリンクを指定することで画像を表示できます。
スクリーンショット 2025-02-06 113307.png
プロパティ欄でリンクを指定できます

ラベル

任意の文字を画面に表示できます。
プロパティ欄では文字の色や横幅、高さとサイズを指定できます。
スクリーンショット 2025-02-06 113704.png


使用例

以下の画像のように複数の箱を配置することで背景や模様を作成できます。
スクリーンショット 2025-02-06 115607.png
スクリーンショット 2025-02-06 115538.png

ボタン

以下の画像のようにボタンを配置し、
実行時の処理とボタン押下時の処理を作成できます。
スクリーンショット 2025-02-06 120031.png

スクリーンショット 2025-02-06 120406.png

スクリーンショット 2025-02-06 120242.png

テキストボックス

以下の画像のようにテキストボックスとボタンを配置し、
実行時の処理とボタン押下時の処理を作成することで入力値を取得や表示ができます。
スクリーンショット 2025-02-06 121131.png
スクリーンショット 2025-02-06 121116.png

スクリーンショット 2025-02-06 121024.png

画像

以下の画像のようにリンク化した画像のurlを指定することで任意の画像を表示できます。
スクリーンショット 2025-02-06 122723.png

ラベル

以下の画像のように画面に文字を配置できます。

スクリーンショット 2025-02-06 133631.png

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?