timagelist / tglyph の使い方
TRANSCRIPT
![Page 1: TImageList / TGlyph の使い方](https://reader034.vdocuments.pub/reader034/viewer/2022042505/58a2d39b1a28ab692e8b57f9/html5/thumbnails/1.jpg)
Copyright © 2013 SERIALGAMES inc. All Rights Reserved. PAGE 1
Happy Creation, Play the Development!
スタイルが絶対に必要だと言ったな。あれは嘘だ
TImageList / TGlyph の使い方
2016/06/13株式会社シリアルゲームズ細川 淳
![Page 2: TImageList / TGlyph の使い方](https://reader034.vdocuments.pub/reader034/viewer/2022042505/58a2d39b1a28ab692e8b57f9/html5/thumbnails/2.jpg)
Copyright © 2013 SERIALGAMES inc. All Rights Reserved. PAGE 2
Happy Creation, Play the Development!
西都原考古博物館アプリ
• とにかく時間が無かった
• ほとんど宮崎で実装した…!
• 小さな机で実装…!
• スタイル作るの大変だよおお!
⇒スタイル作るのヤーメタ!
![Page 3: TImageList / TGlyph の使い方](https://reader034.vdocuments.pub/reader034/viewer/2022042505/58a2d39b1a28ab692e8b57f9/html5/thumbnails/3.jpg)
Copyright © 2013 SERIALGAMES inc. All Rights Reserved. PAGE 3
Happy Creation, Play the Development!
TImageList
• TImageList は画像をまとめて扱うクラス
• VCL版と違ってサイズは自由
![Page 4: TImageList / TGlyph の使い方](https://reader034.vdocuments.pub/reader034/viewer/2022042505/58a2d39b1a28ab692e8b57f9/html5/thumbnails/4.jpg)
Copyright © 2013 SERIALGAMES inc. All Rights Reserved. PAGE 4
Happy Creation, Play the Development!
TGlyph
• TImageList の画像を表示するだけのコントロール
これ
ImageListImageIndexを指定
![Page 5: TImageList / TGlyph の使い方](https://reader034.vdocuments.pub/reader034/viewer/2022042505/58a2d39b1a28ab692e8b57f9/html5/thumbnails/5.jpg)
Copyright © 2013 SERIALGAMES inc. All Rights Reserved. PAGE 5
Happy Creation, Play the Development!
例:イメージボタン
![Page 6: TImageList / TGlyph の使い方](https://reader034.vdocuments.pub/reader034/viewer/2022042505/58a2d39b1a28ab692e8b57f9/html5/thumbnails/6.jpg)
Copyright © 2013 SERIALGAMES inc. All Rights Reserved. PAGE 6
Happy Creation, Play the Development!
イメージボタン
• TImageList / TGlyph を使ってボタンを作る
• OnMouseDown / OnMouseUp を使う
• しかし! TGlyph は操作を受け付けない!
–画像を表示するだけ。HitTest プロパティは無い
⇒TLayout を使う
![Page 7: TImageList / TGlyph の使い方](https://reader034.vdocuments.pub/reader034/viewer/2022042505/58a2d39b1a28ab692e8b57f9/html5/thumbnails/7.jpg)
Copyright © 2013 SERIALGAMES inc. All Rights Reserved. PAGE 7
Happy Creation, Play the Development!
• TLayout の OnMouseUp/Down を使う
TLayout
TGlyph
TImageList
ImageIndex
OnMouseUpOnMouseMoveOnMouseDown
Down/Up でImageIndexを変える
![Page 8: TImageList / TGlyph の使い方](https://reader034.vdocuments.pub/reader034/viewer/2022042505/58a2d39b1a28ab692e8b57f9/html5/thumbnails/8.jpg)
Copyright © 2013 SERIALGAMES inc. All Rights Reserved. PAGE 8
Happy Creation, Play the Development!
procedure TGlyphButton.LayoutMouseDown(
Sender: TObject;
Button: TMouseButton;
Shift: TShiftState;
X, Y: Single);
begin
// FIndex は通常時の ImageIndex
FGlyph.ImageIndex := FIndex + 1;
end;
![Page 9: TImageList / TGlyph の使い方](https://reader034.vdocuments.pub/reader034/viewer/2022042505/58a2d39b1a28ab692e8b57f9/html5/thumbnails/9.jpg)
Copyright © 2013 SERIALGAMES inc. All Rights Reserved. PAGE 9
Happy Creation, Play the Development!
procedure TGlyphButton.LayoutMouseUp(Sender: TObject;Button: TMouseButton;Shift: TShiftState;X, Y: Single);
beginif (FIndex <> FGlyph.ImageIndex) thenbeginFGlyph.ImageIndex := FIndex; // 戻すif (Assigned(FOnClick)) then
FOnClick(Self);end;
end;
![Page 10: TImageList / TGlyph の使い方](https://reader034.vdocuments.pub/reader034/viewer/2022042505/58a2d39b1a28ab692e8b57f9/html5/thumbnails/10.jpg)
Copyright © 2013 SERIALGAMES inc. All Rights Reserved. PAGE 10
Happy Creation, Play the Development!
procedure TGlyphButton.LayoutMouseMove(Sender: TObject;Shift: TShiftState;X, Y: Single);
beginif not (ssLeft in Shift) thenExit;
// マウスカーソルが範囲内ならダウン画像にするif TLayout(Sender).PointInObjectLocal(X, Y) thenFGlyph.ImageIndex := FIndex + 1
elseFGlyph.ImageIndex := FIndex
end;
![Page 11: TImageList / TGlyph の使い方](https://reader034.vdocuments.pub/reader034/viewer/2022042505/58a2d39b1a28ab692e8b57f9/html5/thumbnails/11.jpg)
Copyright © 2013 SERIALGAMES inc. All Rights Reserved. PAGE 11
Happy Creation, Play the Development!
TImageList / TGlyph
TLayout / TFrame
• これらのコントロールを使うとスタイルを使わなくても何とかなる場合も多い!
– TFrame を使えば複雑に組み合わさったコントロールを別のコントロールに載せることも可能…!
![Page 12: TImageList / TGlyph の使い方](https://reader034.vdocuments.pub/reader034/viewer/2022042505/58a2d39b1a28ab692e8b57f9/html5/thumbnails/12.jpg)
Copyright © 2013 SERIALGAMES inc. All Rights Reserved. PAGE 12
Happy Creation, Play the Development!
まとめ
• 基本は Style
• 時間が無かったりしたら TImageList もアリ