画像表示

画像表示と操作に関連する機能の概要とタグリファレンスです。

概要

webTaleKitでは、以下のような画像操作が可能です：

• show タグ - 画像やキャラクターを表示
• hide タグ - 画像やキャラクターを非表示
• moveTo タグ - 画像を移動（アニメーション）

主なタグ

show タグ

画像やキャラクターを画面に表示します。

<show path="chara/protagonist.png" left="300" top="100" />

識別名を付けて後で操作できます：

<show path="chara/protagonist.png" name="hero" left="300" top="100" />

show タグの詳細 →

hide タグ

画像やキャラクターを非表示にします。

<hide name="hero" />

moveTo タグ

画像を移動させます。

<moveTo name="hero" left="500" top="100" duration="1.0" />

基本的な画像操作

キャラクターの表示

<show path="chara/protagonist.png" name="hero" left="300" top="100" />

複数のキャラクターを表示

<!-- 左側にキャラクターA -->
<show path="chara/characterA.png" name="charA" left="100" top="100" />

<!-- 右側にキャラクターB -->
<show path="chara/characterB.png" name="charB" left="600" top="100" />

キャラクターの表情変更

<!-- 通常の表情で表示 -->
<show path="chara/hero_normal.png" name="hero" left="300" top="100" />

<!-- 笑顔に変更 -->
<show path="chara/hero_smile.png" name="hero" />

キャラクターの移動

<!-- 画面右に移動 -->
<moveTo name="hero" left="600" top="100" duration="1.0" />

キャラクターを非表示

<hide name="hero" />

背景画像

背景の表示

<show path="background/room.jpg" name="bg" />

または、sceneConfigで設定：

const sceneConfig = {
  background: 'room.jpg'
}

背景の変更

<show path="background/school.jpg" name="bg" />

画像の向き

左向き（デフォルト）

<show path="chara/character.png" look="left" />

右向き

<show path="chara/character.png" look="right" />

リソース定義を使用

config.js でリソースを定義している場合、名前で参照できます：

// src/resource/config.js
export const chara = [
  {
    name: 'hero',
    path: '/chara/protagonist.png',
    faces: {
      normal: '/chara/protagonist_normal.png',
      smile: '/chara/protagonist_smile.png',
      sad: '/chara/protagonist_sad.png'
    }
  }
]

<!-- pathの代わりにnameを使用 -->
<show name="hero" left="300" top="100" />

<!-- 表情を変更 -->
<show name="hero" path="faces/smile" />

画像フィルター（予定機能）

アルファ版の制限

以下のフィルター機能は、v0.3.0以降で実装予定です。

将来的には、以下のフィルター効果が使えるようになります：

<show path="chara/character.png" name="char">
  <filter type="sepia" value="0.5" />
  <filter type="opacity" value="0.8" />
</show>

条件付き表示

if 属性を使って、条件を満たす場合のみ表示できます：

<show path="chara/friend.png" name="friend" if="hasMet" />

実用例

キャラクター登場シーン

<text>ドアが開き、彼女が入ってきた。</text>

<show path="chara/heroine.png" name="heroine" left="300" top="100" wait="0.5" />

<say name="ヒロイン">「お待たせしました」</say>

キャラクターの移動

<text>彼は近づいてきた。</text>

<moveTo name="friend" left="400" top="100" duration="2.0" />

<say name="友人">「久しぶりだな」</say>

複数キャラクターの会話

<show name="protagonist" left="200" top="100" />
<show name="friend" left="600" top="100" />

<say name="主人公" pattern="normal">「おはよう」</say>
<say name="友人" pattern="smile">「おはよう！」</say>

<!-- 友人が退場 -->
<hide name="friend" />

背景の切り替え

<text>場面が変わり、教室に移動した。</text>

<show path="background/classroom.jpg" name="bg" />

<text>そこには彼女がいた。</text>
<show path="chara/heroine.png" name="heroine" left="300" top="100" />

画像の配置

標準的な配置

画面幅: 1280px
画面高さ: 720px

左端のキャラクター: left="100"
中央のキャラクター: left="450"
右端のキャラクター: left="800"

標準の高さ: top="100"

3人配置の例

<show name="charA" left="100" top="100" />
<show name="charB" left="450" top="100" />
<show name="charC" left="800" top="100" />

関連タグ

• show - 画像を表示
• hide - 画像を非表示
• moveTo - 画像を移動
• say - キャラクターのセリフを表示（自動表示予定）

次のステップ

• テキスト表示 - テキスト関連の機能
• 音声 - 音声再生の機能
• 制御構文 - 条件分岐とジャンプ