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

hytopia-mobile

HYTOPIA SDKを使ったゲームに、タッチ操作やモバイルUIを実装し、スマホ対応やクロスプラットフォームでの互換性を実現するための支援をするSkill。

📜 元の英語説明(参考)

Helps implement mobile support in HYTOPIA SDK games. Use when users need touch controls, mobile UI, device detection, or cross-platform compatibility. Covers mobile controls, touch input, and responsive UI.

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

一言でいうと

HYTOPIA SDKを使ったゲームに、タッチ操作やモバイルUIを実装し、スマホ対応やクロスプラットフォームでの互換性を実現するための支援をするSkill。

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

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

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

🍎 Mac / 🐧 Linux

mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o hytopia-mobile.zip https://jpskill.com/download/9064.zip && unzip -o hytopia-mobile.zip && rm hytopia-mobile.zip

🪟 Windows (PowerShell)

$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/9064.zip -OutFile "$d\hytopia-mobile.zip"; Expand-Archive "$d\hytopia-mobile.zip" -DestinationPath $d -Force; ri "$d\hytopia-mobile.zip"

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

💾 手動でダウンロードしたい(コマンドが難しい人向け)

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

⬇ .zip でダウンロード(推奨) ⬇ .skill 形式(上級者用) 元のソース ↗

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

🎯 このSkillでできること

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

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

1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
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/mobile

このスキルを使用するタイミング

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

ゲームにモバイルコントロールを追加したい
モバイルデバイスを検出する必要がある
タッチ入力の処理について知りたい
モバイル向けのレスポンシブ UI を作成したい
クロスプラットフォームの互換性が必要
モバイル固有のボタンレイアウトについて知りたい

モバイルの基礎

自動機能

HYTOPIA は以下を自動的に処理します。

クロスプラットフォームプレイ (モバイル + デスクトップの同時プレイ)
デバイス間でのゲーム状態の一貫性
移動ジョイスティック (画面の左 40%)
カメラコントロール (画面の右 60%)
横向き表示の強制

実装する必要があるもの

カスタムアクションボタン (射撃、ジャンプ、インタラクト)
モバイル向けに最適化された UI サイズ
タッチ操作に適したボタンレイアウト

モバイルの検出

CSS による検出

HYTOPIA は、モバイルデバイス上の <body> に .mobile クラスを追加します。

/* デスクトップ専用のスタイル */
.desktop-controls {
  display: block;
}

/* モバイルではデスクトップコントロールを非表示にする */
body.mobile .desktop-controls {
  display: none;
}

/* モバイル専用のスタイル */
.mobile-controls {
  display: none;
}

body.mobile .mobile-controls {
  display: flex;
}

JavaScript による検出

// モバイルで実行されているか確認する
if (hytopia.isMobile) {
  setupMobileUI();
} else {
  setupDesktopUI();
}

// 条件付きロジック
function showControls() {
  if (hytopia.isMobile) {
    showTouchButtons();
  } else {
    showKeyboardHints();
  }
}

モバイルコントロール

入力シミュレーション

hytopia.pressInput() を使用して、キーボード/マウス入力をシミュレートします。

// キー入力をシミュレートする
hytopia.pressInput('space', true);   // キーダウン
hytopia.pressInput('space', false);  // キーアップ

// マウスクリックをシミュレートする
hytopia.pressInput('ml', true);   // 左マウスボタンダウン
hytopia.pressInput('ml', false);  // 左マウスボタンアップ
hytopia.pressInput('mr', true);   // 右マウスボタンダウン

モバイルボタンの作成

<script>
  // ジャンプボタン
  const jumpBtn = document.getElementById('jump-btn');

  jumpBtn.addEventListener('touchstart', (e) => {
    e.preventDefault();  // デフォルトのタッチ動作を防止
    jumpBtn.classList.add('active');
    hytopia.pressInput(' ', true);  // Space キー
  });

  jumpBtn.addEventListener('touchend', (e) => {
    e.preventDefault();
    jumpBtn.classList.remove('active');
    hytopia.pressInput(' ', false);
  });

  // 攻撃ボタン
  const attackBtn = document.getElementById('attack-btn');

  attackBtn.addEventListener('touchstart', (e) => {
    e.preventDefault();
    attackBtn.classList.add('active');
    hytopia.pressInput('ml', true);  // 左クリック
  });

  attackBtn.addEventListener('touchend', (e) => {
    e.preventDefault();
    attackBtn.classList.remove('active');
    hytopia.pressInput('ml', false);
  });
</script>

完全なモバイルコントロールレイアウト

<div class="mobile-controls">
  <a id="interact-btn" class="mobile-button">
    <img src="{{CDN_ASSETS_URL}}/icons/interact.png" />
  </a>

  <a id="jump-btn" class="mobile-button">
    <img src="{{CDN_ASSETS_URL}}/icons/jump.png" />
  </a>

  <a id="attack-btn" class="mobile-button">
    <img src="{{CDN_ASSETS_URL}}/icons/attack.png" />
  </a>
</div>

<style>
  .mobile-controls {
    display: none;
  }

  body.mobile .mobile-controls {
    display: flex;
    gap: 14px;
    position: fixed;
    bottom: 40px;
    right: 40px;
  }

  .mobile-button {
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  }

  .mobile-button img {
    width: 24px;
    height: 24px;
    filter: invert(1);
  }

  .mobile-button.active {
    transform: scale(0.92);
    background-color: rgba(0, 0, 0, 0.75);
  }
</style>

<script>
  document.querySelectorAll('.mobile-button').forEach(btn => {
    const input = btn.dataset.input;

    btn.addEventListener('touchstart', (e) => {
      e.preventDefault();
      btn.classList.add('active');
      hytopia.pressInput(input, true);
    });

    btn.addEventListener('touchend', (e) => {
      e.preventDefault();
      btn.classList.remove('active');
      hytopia.pressInput(input, false);
    });
  });
</script>

レスポンシブ UI デザイン

モバイル向けのスケーリング

/* 基本 UI */
.game-hud {
  font-size: 16px;
  padding: 10px;
}

/* モバイルではタッチターゲットを大きくする */
body.mobile .game-hud {
  font-size: 20px;
  padding: 16px;
}

/* 最小タッチターゲットサイズ: 44x44px */
body.mobile button,
body.mobile .touchable {
  min-width: 44px;
  min-height: 44px;
}

デスクトップ要素の非表示

/* キーボードヒント - デスクトップのみ */
.keyboard-hint {
  display: inline-block;
}

body.mobile .keyboard-hint {
  display: none;
}

/* モバイル UI を簡素化する */
body.mobile .detailed-stats {
  display: none;
}

body.mobile .simple-stats {
  display: block;
}

セーフエリア

/* ノッチと角の丸みを考慮する */
body.mobile .mobile-controls {
  padding-bottom: env(safe-area-inset-bottom, 20px);
  padding-right: env(safe-area-inset-right, 20px);
}

モバイル UI のテスト

ブラウザの開発者ツール

play.hytopia.com でゲームを開きます
開発者ツールを開きます (表示 → 開発者ツールまたは右クリック → Inspect)
開発者ツールバーにあるモバイルデバイスのアイコンをクリックします
横向きモードに切り替えます
ページをリロードします (モバイル検出に必要)

テストチェックリスト

[ ] ボタンは十分に大きいか (最小 44px)
[ ] ボタンがジョイスティックエリア (左 40%) と重なっていないか
[ ] UI が横向きで読みやすいか
[ ] タッチフィードバックが表示されるか (アクティブ状態)
[ ] プレイ中に UI を誤ってタッチしないか
[ ] アクションボタンの上に重要な情報が表示されているか

ベストプラクティス

最初にデスクトップ向けに設計する - 次にモバイル向けに適合させる
e.preventDefault() を使用する - 不要なブラウザの動作を防止する
タッチターゲットを大きくする

(原文はここで切り詰められています)

📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

HYTOPIA Mobile Support

This skill helps you implement mobile support in HYTOPIA SDK games.

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

When to Use This Skill

Use this skill when the user:

Wants to add mobile controls to their game
Needs to detect mobile devices
Asks about touch input handling
Wants to create responsive UI for mobile
Needs cross-platform compatibility
Asks about mobile-specific button layouts

Mobile Basics

Automatic Features

HYTOPIA handles automatically:

Cross-platform play (mobile + desktop together)
Game state consistency across devices
Movement joystick (left 40% of screen)
Camera control (right 60% of screen)
Landscape orientation enforcement

What You Must Implement

Custom action buttons (shoot, jump, interact)
Mobile-optimized UI sizing
Touch-friendly button layouts

Mobile Detection

CSS Detection

HYTOPIA adds .mobile class to <body> on mobile devices:

/* Desktop-only styles */
.desktop-controls {
  display: block;
}

/* Hide desktop controls on mobile */
body.mobile .desktop-controls {
  display: none;
}

/* Mobile-only styles */
.mobile-controls {
  display: none;
}

body.mobile .mobile-controls {
  display: flex;
}

JavaScript Detection

// Check if running on mobile
if (hytopia.isMobile) {
  setupMobileUI();
} else {
  setupDesktopUI();
}

// Conditional logic
function showControls() {
  if (hytopia.isMobile) {
    showTouchButtons();
  } else {
    showKeyboardHints();
  }
}

Mobile Controls

Input Simulation

Use hytopia.pressInput() to simulate keyboard/mouse input:

// Simulate key press
hytopia.pressInput('space', true);   // Key down
hytopia.pressInput('space', false);  // Key up

// Simulate mouse click
hytopia.pressInput('ml', true);   // Left mouse down
hytopia.pressInput('ml', false);  // Left mouse up
hytopia.pressInput('mr', true);   // Right mouse down

Creating Mobile Buttons

<script>
  // Jump button
  const jumpBtn = document.getElementById('jump-btn');

  jumpBtn.addEventListener('touchstart', (e) => {
    e.preventDefault();  // Prevent default touch behavior
    jumpBtn.classList.add('active');
    hytopia.pressInput(' ', true);  // Space key
  });

  jumpBtn.addEventListener('touchend', (e) => {
    e.preventDefault();
    jumpBtn.classList.remove('active');
    hytopia.pressInput(' ', false);
  });

  // Attack button
  const attackBtn = document.getElementById('attack-btn');

  attackBtn.addEventListener('touchstart', (e) => {
    e.preventDefault();
    attackBtn.classList.add('active');
    hytopia.pressInput('ml', true);  // Left click
  });

  attackBtn.addEventListener('touchend', (e) => {
    e.preventDefault();
    attackBtn.classList.remove('active');
    hytopia.pressInput('ml', false);
  });
</script>

Complete Mobile Control Layout

<div class="mobile-controls">
  <a id="interact-btn" class="mobile-button">
    <img src="{{CDN_ASSETS_URL}}/icons/interact.png" />
  </a>

  <a id="jump-btn" class="mobile-button">
    <img src="{{CDN_ASSETS_URL}}/icons/jump.png" />
  </a>

  <a id="attack-btn" class="mobile-button">
    <img src="{{CDN_ASSETS_URL}}/icons/attack.png" />
  </a>
</div>

<style>
  .mobile-controls {
    display: none;
  }

  body.mobile .mobile-controls {
    display: flex;
    gap: 14px;
    position: fixed;
    bottom: 40px;
    right: 40px;
  }

  .mobile-button {
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  }

  .mobile-button img {
    width: 24px;
    height: 24px;
    filter: invert(1);
  }

  .mobile-button.active {
    transform: scale(0.92);
    background-color: rgba(0, 0, 0, 0.75);
  }
</style>

<script>
  document.querySelectorAll('.mobile-button').forEach(btn => {
    const input = btn.dataset.input;

    btn.addEventListener('touchstart', (e) => {
      e.preventDefault();
      btn.classList.add('active');
      hytopia.pressInput(input, true);
    });

    btn.addEventListener('touchend', (e) => {
      e.preventDefault();
      btn.classList.remove('active');
      hytopia.pressInput(input, false);
    });
  });
</script>

Responsive UI Design

Scaling for Mobile

/* Base UI */
.game-hud {
  font-size: 16px;
  padding: 10px;
}

/* Larger touch targets on mobile */
body.mobile .game-hud {
  font-size: 20px;
  padding: 16px;
}

/* Minimum touch target size: 44x44px */
body.mobile button,
body.mobile .touchable {
  min-width: 44px;
  min-height: 44px;
}

Hiding Desktop Elements

/* Keyboard hints - desktop only */
.keyboard-hint {
  display: inline-block;
}

body.mobile .keyboard-hint {
  display: none;
}

/* Simplify mobile UI */
body.mobile .detailed-stats {
  display: none;
}

body.mobile .simple-stats {
  display: block;
}

Safe Areas

/* Account for notches and rounded corners */
body.mobile .mobile-controls {
  padding-bottom: env(safe-area-inset-bottom, 20px);
  padding-right: env(safe-area-inset-right, 20px);
}

Testing Mobile UI

Browser Developer Tools

Open game at play.hytopia.com
Open Developer Tools (View → Developer Tools or right-click → Inspect)
Click mobile device icon in dev tools toolbar
Switch to landscape mode
Refresh the page (required for mobile detection)

Testing Checklist

[ ] Buttons are large enough (44px minimum)
[ ] Buttons don't overlap joystick area (left 40%)
[ ] UI readable in landscape
[ ] Touch feedback visible (active states)
[ ] No accidental touches on UI while playing
[ ] Important info visible above action buttons

Best Practices

Design desktop first - Then adapt for mobile
Use e.preventDefault() - Prevents unwanted browser behavior
Large touch targets - Minimum 44x44px for buttons
Visual feedback - Show active/pressed states
Right side placement - Action buttons on right 60% of screen
Avoid overlapping - Don't place UI over joystick/camera areas
Test on device - Browser simulation isn't perfect

Common Input Keys

Input	Key
Space/Jump	`' '` (space)
Left Click	`'ml'`
Right Click	`'mr'`
WASD	`'w'`, `'a'`, `'s'`, `'d'`
Interact	`'e'`
Reload	`'r'`
Sprint	`'shift'`

Common Mistakes

Forgetting e.preventDefault() in touch handlers
Making buttons too small for fingers
Placing buttons over joystick area
Not testing on actual mobile devices
Forgetting to refresh after enabling device simulation