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本体の挙動とは独立した参考情報です。
下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。
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
$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. 下の青いボタンを押して
hytopia-lighting.zipをダウンロード - 2. ZIPファイルをダブルクリックで解凍 →
hytopia-lightingフォルダができる - 3. そのフォルダを
C:\Users\あなたの名前\.claude\skills\(Win)または~/.claude/skills/(Mac)へ移動 - 4. Claude Code を再起動
⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。
🎯 このSkillでできること
下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。
📦 インストール方法 (3ステップ)
- 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
- 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
- 3. 展開してできたフォルダを、ホームフォルダの
.claude/skills/に置く- · macOS / Linux:
~/.claude/skills/ - · Windows:
%USERPROFILE%\.claude\skills\
- · macOS / Linux:
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
- Limit dynamic lights - Point and spot lights are expensive; use 2-4 max
- Use ambient + sun - Cover most lighting needs cheaply
- Bake static lighting - Use block textures for static light sources
- Interpolation is automatic - Light changes smooth automatically
- Range matters - Shorter range = better performance
- 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