jpskill.com
🛠️ 開発・MCP コミュニティ

hytopia-lighting

HYTOPIA SDKを使ったゲームで、環境光や太陽光、スポットライトなどの照明設定、影の調整、パフォーマンス最適化を行い、より魅力的なゲーム空間を作り出す照明設定支援Skill。

📜 元の英語説明(参考)

Helps configure lighting in HYTOPIA SDK games. Use when users need ambient light, sun/directional light, point lights, spot lights, or day/night cycles. Covers Light class, shadows, and performance optimization.

🇯🇵 日本人クリエイター向け解説

一言でいうと

HYTOPIA SDKを使ったゲームで、環境光や太陽光、スポットライトなどの照明設定、影の調整、パフォーマンス最適化を行い、より魅力的なゲーム空間を作り出す照明設定支援Skill。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o hytopia-lighting.zip https://jpskill.com/download/9063.zip && unzip -o hytopia-lighting.zip && rm hytopia-lighting.zip
🪟 Windows (PowerShell)
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/9063.zip -OutFile "$d\hytopia-lighting.zip"; Expand-Archive "$d\hytopia-lighting.zip" -DestinationPath $d -Force; ri "$d\hytopia-lighting.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して hytopia-lighting.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → hytopia-lighting フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-18
取得日時
2026-05-18
同梱ファイル
1

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

HYTOPIA ライティング

このスキルは、HYTOPIA SDK ゲームでのライティング設定を支援します。

ドキュメント: https://dev.hytopia.com/sdk-guides/lighting

このスキルを使用する場面

このスキルは、ユーザーが以下のことを行いたい場合に利用します。

  • アンビエントライトまたはディレクショナルライトを設定したい
  • ポイントライトまたはスポットライトを作成する必要がある
  • 昼/夜サイクルについて質問がある
  • 影を設定したい
  • ライティングのパフォーマンスを最適化する必要がある
  • ダイナミックライティングエフェクトについて質問がある

ライトタイプの概要

HYTOPIA は、5 種類のライトタイプをサポートしています。

タイプ 説明 パフォーマンス
Ambient ワールド全体の基本ライティング No 低コスト
Sun/Directional 単一の指向性光源 Yes 低コスト
Point ある一点から全方向に放射 Yes 高コスト
Spot 円錐形の放射 Yes 高コスト
Emissive ブロックからの放射 (近日公開) No N/A

アンビエントライト

ワールド全体に影響を与える基本ライティングです。

import { World } from 'hytopia';

// アンビエントライトの色と強度を設定
world.setAmbientLight({
  color: { r: 0.3, g: 0.3, b: 0.4 },  // わずかに青みがかった色合い
  intensity: 0.5
});

// 明るい昼間のアンビエントライト
world.setAmbientLight({
  color: { r: 1, g: 1, b: 1 },
  intensity: 0.8
});

// 暗い夜間のアンビエントライト
world.setAmbientLight({
  color: { r: 0.1, g: 0.1, b: 0.2 },
  intensity: 0.2
});

太陽光 (ディレクショナル)

影を伴う、ワールド全体に影響を与える単一の光源です。

import { World } from 'hytopia';

// 太陽の位置と色を設定
world.setSunLight({
  position: { x: 100, y: 200, z: 50 },  // この点からの方向
  color: { r: 1, g: 0.95, b: 0.8 },     // 暖かい太陽光
  intensity: 1.0
});

// 夕焼けのライティング
world.setSunLight({
  position: { x: 50, y: 20, z: 0 },  // 低い太陽
  color: { r: 1, g: 0.5, b: 0.2 },   // オレンジ
  intensity: 0.8
});

// 月光
world.setSunLight({
  position: { x: -50, y: 100, z: 30 },
  color: { r: 0.6, g: 0.7, b: 1 },  // クールな青色
  intensity: 0.3
});

ポイントライト

ある一点から全方向に光を放射します。使いすぎに注意 - 高コスト!

import { Light, LightType } from 'hytopia';

// ポイントライトを作成
const torchLight = new Light({
  type: LightType.POINT,
  position: { x: 10, y: 5, z: 10 },
  color: { r: 1, g: 0.7, b: 0.3 },  // 暖かい炎の色
  intensity: 2.0,
  range: 15  // 光の減衰距離
});

world.addLight(torchLight);

// エンティティを追跡するダイナミックライト
const playerLight = new Light({
  type: LightType.POINT,
  color: { r: 1, g: 1, b: 1 },
  intensity: 1.5,
  range: 10
});

// エンティティにアタッチ
playerLight.setTrackedEntity(player.entity);
world.addLight(playerLight);

スポットライト

円錐形のライトです。使いすぎに注意 - 高コスト!

import { Light, LightType } from 'hytopia';

// スポットライトを作成
const spotlight = new Light({
  type: LightType.SPOT,
  position: { x: 0, y: 20, z: 0 },
  target: { x: 0, y: 0, z: 0 },      // ライトが向くポイント
  color: { r: 1, g: 1, b: 1 },
  intensity: 3.0,
  range: 30,
  angle: 45,        // 円錐の角度 (度)
  penumbra: 0.5     // ソフトエッジ (0 = ハード, 1 = 非常にソフト)
});

world.addLight(spotlight);

// プレイヤーに取り付けられた懐中電灯
const flashlight = new Light({
  type: LightType.SPOT,
  color: { r: 1, g: 1, b: 0.9 },
  intensity: 2.5,
  range: 25,
  angle: 30,
  penumbra: 0.3
});

flashlight.setTrackedEntity(player.entity);
world.addLight(flashlight);

昼/夜サイクル

import { World } from 'hytopia';

class DayNightCycle {
  private world: World;
  private timeOfDay: number = 0;  // 0-24 時間

  constructor(world: World) {
    this.world = world;
  }

  update(deltaTime: number) {
    // 時間を進める (必要に応じて速度を調整)
    this.timeOfDay += deltaTime * 0.001;  // 1 実秒 = 1 ゲーム時間
    if (this.timeOfDay >= 24) this.timeOfDay = 0;

    this.updateLighting();
  }

  updateLighting() {
    const hour = this.timeOfDay;

    // 太陽の位置を計算
    const sunAngle = ((hour - 6) / 12) * Math.PI;  // 午前6時 = 地平線, 正午 = 頂点
    const sunY = Math.sin(sunAngle) * 200;
    const sunX = Math.cos(sunAngle) * 200;

    // 時間に基づいてライティングを決定
    if (hour >= 6 && hour < 18) {
      // 昼間
      const intensity = Math.sin(sunAngle) * 0.8 + 0.2;

      this.world.setSunLight({
        position: { x: sunX, y: Math.max(sunY, 10), z: 0 },
        color: this.getSunColor(hour),
        intensity
      });

      this.world.setAmbientLight({
        color: { r: 0.6, g: 0.7, b: 0.8 },
        intensity: 0.4 + intensity * 0.3
      });
    } else {
      // 夜間
      this.world.setSunLight({
        position: { x: -100, y: 100, z: 50 },
        color: { r: 0.5, g: 0.6, b: 0.8 },
        intensity: 0.15
      });

      this.world.setAmbientLight({
        color: { r: 0.1, g: 0.1, b: 0.2 },
        intensity: 0.2
      });
    }
  }

  getSunColor(hour: number): { r: number, g: number, b: number } {
    if (hour < 7 || hour > 17) {
      // 日の出/日の入り - オレンジ
      return { r: 1, g: 0.5, b: 0.2 };
    } else if (hour < 9 || hour > 15) {
      // 朝/夕方 - 暖かい
      return { r: 1, g: 0.85, b: 0.7 };
    } else {
      // 真昼 - 白
      return { r: 1, g: 0.98, b: 0.95 };
    }
  }
}

ダイナミックライトエフェクト

ちらつく松明

class FlickeringLight {
  private light: Light;
  private baseIntensity: number;

  constructor(light: Light, baseIntensity: number = 2.0) {
    this.light = light;
    this.baseIntensity = baseIntensity;
  }

  update() {
    // ランダムなちらつき
    const flicker = 0.8 + Math.random() * 0.4;  // 0.8 から 1.2
    this.light.setIntensity(this.baseIntensity * flicker);
  }
}

パルスライト

class PulsingLight {
  private light: Light;
  private time: number = 0;
  private minIntensity: number;
  private maxIntensity: number;
  private speed: number;

  constructor(light: Light, min: number, max: number, speed: number) {
    this.light = light;
    this.minIntensity = m
📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

HYTOPIA Lighting

This skill helps you configure lighting in HYTOPIA SDK games.

Documentation: https://dev.hytopia.com/sdk-guides/lighting

When to Use This Skill

Use this skill when the user:

  • Wants to set up ambient or directional lighting
  • Needs to create point lights or spot lights
  • Asks about day/night cycles
  • Wants to configure shadows
  • Needs to optimize lighting performance
  • Asks about dynamic lighting effects

Light Types Overview

HYTOPIA supports five light types:

Type Description Shadows Performance
Ambient Base world lighting No Cheap
Sun/Directional Single directional source Yes Cheap
Point Emits from a point in all directions Yes Expensive
Spot Cone-shaped emission Yes Expensive
Emissive From blocks (coming soon) No N/A

Ambient Light

Base lighting that affects the entire world.

import { World } from 'hytopia';

// Set ambient light color and intensity
world.setAmbientLight({
  color: { r: 0.3, g: 0.3, b: 0.4 },  // Slight blue tint
  intensity: 0.5
});

// Bright daytime ambient
world.setAmbientLight({
  color: { r: 1, g: 1, b: 1 },
  intensity: 0.8
});

// Dark nighttime ambient
world.setAmbientLight({
  color: { r: 0.1, g: 0.1, b: 0.2 },
  intensity: 0.2
});

Sun Light (Directional)

Single light source that affects the entire world with shadows.

import { World } from 'hytopia';

// Set sun position and color
world.setSunLight({
  position: { x: 100, y: 200, z: 50 },  // Direction FROM this point
  color: { r: 1, g: 0.95, b: 0.8 },     // Warm sunlight
  intensity: 1.0
});

// Sunset lighting
world.setSunLight({
  position: { x: 50, y: 20, z: 0 },  // Low sun
  color: { r: 1, g: 0.5, b: 0.2 },   // Orange
  intensity: 0.8
});

// Moonlight
world.setSunLight({
  position: { x: -50, y: 100, z: 30 },
  color: { r: 0.6, g: 0.7, b: 1 },  // Cool blue
  intensity: 0.3
});

Point Lights

Emit light in all directions from a point. Use sparingly - expensive!

import { Light, LightType } from 'hytopia';

// Create point light
const torchLight = new Light({
  type: LightType.POINT,
  position: { x: 10, y: 5, z: 10 },
  color: { r: 1, g: 0.7, b: 0.3 },  // Warm fire color
  intensity: 2.0,
  range: 15  // Light falloff distance
});

world.addLight(torchLight);

// Dynamic light following entity
const playerLight = new Light({
  type: LightType.POINT,
  color: { r: 1, g: 1, b: 1 },
  intensity: 1.5,
  range: 10
});

// Attach to entity
playerLight.setTrackedEntity(player.entity);
world.addLight(playerLight);

Spot Lights

Cone-shaped lights. Use sparingly - expensive!

import { Light, LightType } from 'hytopia';

// Create spot light
const spotlight = new Light({
  type: LightType.SPOT,
  position: { x: 0, y: 20, z: 0 },
  target: { x: 0, y: 0, z: 0 },      // Point light looks at
  color: { r: 1, g: 1, b: 1 },
  intensity: 3.0,
  range: 30,
  angle: 45,        // Cone angle in degrees
  penumbra: 0.5     // Soft edge (0 = hard, 1 = very soft)
});

world.addLight(spotlight);

// Flashlight attached to player
const flashlight = new Light({
  type: LightType.SPOT,
  color: { r: 1, g: 1, b: 0.9 },
  intensity: 2.5,
  range: 25,
  angle: 30,
  penumbra: 0.3
});

flashlight.setTrackedEntity(player.entity);
world.addLight(flashlight);

Day/Night Cycle

import { World } from 'hytopia';

class DayNightCycle {
  private world: World;
  private timeOfDay: number = 0;  // 0-24 hours

  constructor(world: World) {
    this.world = world;
  }

  update(deltaTime: number) {
    // Advance time (adjust speed as needed)
    this.timeOfDay += deltaTime * 0.001;  // 1 real second = 1 game hour
    if (this.timeOfDay >= 24) this.timeOfDay = 0;

    this.updateLighting();
  }

  updateLighting() {
    const hour = this.timeOfDay;

    // Calculate sun position
    const sunAngle = ((hour - 6) / 12) * Math.PI;  // 6am = horizon, noon = top
    const sunY = Math.sin(sunAngle) * 200;
    const sunX = Math.cos(sunAngle) * 200;

    // Determine lighting based on time
    if (hour >= 6 && hour < 18) {
      // Daytime
      const intensity = Math.sin(sunAngle) * 0.8 + 0.2;

      this.world.setSunLight({
        position: { x: sunX, y: Math.max(sunY, 10), z: 0 },
        color: this.getSunColor(hour),
        intensity
      });

      this.world.setAmbientLight({
        color: { r: 0.6, g: 0.7, b: 0.8 },
        intensity: 0.4 + intensity * 0.3
      });
    } else {
      // Nighttime
      this.world.setSunLight({
        position: { x: -100, y: 100, z: 50 },
        color: { r: 0.5, g: 0.6, b: 0.8 },
        intensity: 0.15
      });

      this.world.setAmbientLight({
        color: { r: 0.1, g: 0.1, b: 0.2 },
        intensity: 0.2
      });
    }
  }

  getSunColor(hour: number): { r: number, g: number, b: number } {
    if (hour < 7 || hour > 17) {
      // Sunrise/sunset - orange
      return { r: 1, g: 0.5, b: 0.2 };
    } else if (hour < 9 || hour > 15) {
      // Morning/evening - warm
      return { r: 1, g: 0.85, b: 0.7 };
    } else {
      // Midday - white
      return { r: 1, g: 0.98, b: 0.95 };
    }
  }
}

Dynamic Light Effects

Flickering Torch

class FlickeringLight {
  private light: Light;
  private baseIntensity: number;

  constructor(light: Light, baseIntensity: number = 2.0) {
    this.light = light;
    this.baseIntensity = baseIntensity;
  }

  update() {
    // Random flicker
    const flicker = 0.8 + Math.random() * 0.4;  // 0.8 to 1.2
    this.light.setIntensity(this.baseIntensity * flicker);
  }
}

Pulsing Light

class PulsingLight {
  private light: Light;
  private time: number = 0;
  private minIntensity: number;
  private maxIntensity: number;
  private speed: number;

  constructor(light: Light, min: number, max: number, speed: number) {
    this.light = light;
    this.minIntensity = min;
    this.maxIntensity = max;
    this.speed = speed;
  }

  update(deltaTime: number) {
    this.time += deltaTime * this.speed;
    const t = (Math.sin(this.time) + 1) / 2;  // 0 to 1
    const intensity = this.minIntensity + t * (this.maxIntensity - this.minIntensity);
    this.light.setIntensity(intensity);
  }
}

Explosion Flash

function createExplosionFlash(position: Vector3) {
  const flash = new Light({
    type: LightType.POINT,
    position,
    color: { r: 1, g: 0.8, b: 0.3 },
    intensity: 10,
    range: 30
  });

  world.addLight(flash);

  // Fade out
  let intensity = 10;
  const fadeInterval = setInterval(() => {
    intensity -= 0.5;
    if (intensity <= 0) {
      clearInterval(fadeInterval);
      world.removeLight(flash);
    } else {
      flash.setIntensity(intensity);
    }
  }, 16);
}

Best Practices

  1. Limit dynamic lights - Point and spot lights are expensive; use 2-4 max
  2. Use ambient + sun - Cover most lighting needs cheaply
  3. Bake static lighting - Use block textures for static light sources
  4. Interpolation is automatic - Light changes smooth automatically
  5. Range matters - Shorter range = better performance
  6. Color temperature - Warm (fire) vs cool (moonlight) sets mood

Performance Tips

// Good: Few dynamic lights
const torchLight = new Light({ type: LightType.POINT, range: 10 });
const playerLight = new Light({ type: LightType.POINT, range: 8 });

// Bad: Too many dynamic lights
for (let i = 0; i < 50; i++) {
  world.addLight(new Light({ type: LightType.POINT }));  // Don't do this!
}

// Better: Use ambient + sun for general lighting
world.setAmbientLight({ color: { r: 0.4, g: 0.4, b: 0.5 }, intensity: 0.6 });
world.setSunLight({ position: { x: 100, y: 200, z: 50 }, intensity: 1.0 });
// Then add only 2-3 point lights for important effects