[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6EFTGRA9GS27PJS0RY0DD9Z":3,"skill-same:01M6EFTGRA9GS27PJS0RY0DD9Z":45},{"skillNo":4,"name":5,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":17,"publishedAt":18,"linkOnly":19,"markdownContent":20,"markdownBody":20,"frontMatter":21,"refName":22,"commitSha":23,"skillDirectory":24,"forksCount":25,"repositoryHtmlUrl":26,"repositoryHomepageUrl":27,"ownerHtmlUrl":28,"ownerBlogUrl":6,"ownerDescription":29,"updatedAt":30,"install":31,"resources":44},"01M6EFTGRA9GS27PJS0RY0DD9Z","phaser",null,"ComeOnOliver\u002Fskillshub","ComeOnOliver","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F43215937?v=4","01M6E5JNFECJAAVFE0W7SMWWD2","Haoran Shu","01M6E5JNNDQS7AJZDYFQ8TPZCK",66,"MIT","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002FTerminalSkills\u002Fskills\u002Fphaser\u002FSKILL.md",[],[5],"2026-11-10 10:12:30",false,"# Phaser — HTML5 Game Framework for Browser Games\n\nYou are an expert in Phaser, the fast and feature-rich HTML5 game framework for making 2D games that run in web browsers and mobile devices. You help developers build arcade games, puzzle games, RPGs, platformers, and roguelikes using Phaser's scene system, physics engines (Arcade and Matter.js), sprite animations, tilemaps, tweens, particle effects, and input handling — with TypeScript support and Vite for modern development workflow.\n\n## Core Capabilities\n\n### Game Configuration\n\n```typescript\n\u002F\u002F src\u002Fmain.ts — Phaser game entry point\nimport Phaser from \"phaser\";\nimport { PreloadScene } from \".\u002Fscenes\u002FPreloadScene\";\nimport { GameScene } from \".\u002Fscenes\u002FGameScene\";\nimport { HUDScene } from \".\u002Fscenes\u002FHUDScene\";\n\nconst config: Phaser.Types.Core.GameConfig = {\n  type: Phaser.AUTO,                      \u002F\u002F WebGL → Canvas fallback\n  width: 800,\n  height: 600,\n  pixelArt: true,                         \u002F\u002F No anti-aliasing on sprites\n  roundPixels: true,                      \u002F\u002F Snap to pixel grid\n  scale: {\n    mode: Phaser.Scale.FIT,               \u002F\u002F Fit viewport, keep aspect ratio\n    autoCenter: Phaser.Scale.CENTER_BOTH,\n  },\n  physics: {\n    default: \"arcade\",                    \u002F\u002F Fast AABB physics\n    arcade: {\n      gravity: { x: 0, y: 300 },         \u002F\u002F Platformer gravity\n      debug: false,\n    },\n  },\n  scene: [PreloadScene, GameScene, HUDScene],\n};\n\nnew Phaser.Game(config);\n```\n\n### Scene System\n\n```typescript\n\u002F\u002F src\u002Fscenes\u002FGameScene.ts — Main game loop\nexport class GameScene extends Phaser.Scene {\n  private player!: Phaser.Physics.Arcade.Sprite;\n  private platforms!: Phaser.Physics.Arcade.StaticGroup;\n  private coins!: Phaser.Physics.Arcade.Group;\n  private score: number = 0;\n\n  constructor() {\n    super(\"GameScene\");\n  }\n\n  create() {\n    \u002F\u002F Tilemap from Tiled editor\n    const map = this.make.tilemap({ key: \"level-1\" });\n    const tileset = map.addTilesetImage(\"terrain\", \"terrain-tiles\")!;\n    const ground = map.createLayer(\"Ground\", tileset)!;\n    ground.setCollisionByProperty({ collides: true });\n\n    \u002F\u002F Player with animations\n    this.player = this.physics.add.sprite(100, 200, \"hero\");\n    this.player.setCollideWorldBounds(true);\n    this.player.setBounce(0.1);\n\n    this.anims.create({\n      key: \"run\",\n      frames: this.anims.generateFrameNumbers(\"hero\", { start: 0, end: 5 }),\n      frameRate: 10,\n      repeat: -1,                         \u002F\u002F Loop forever\n    });\n\n    \u002F\u002F Collisions\n    this.physics.add.collider(this.player, ground);\n\n    \u002F\u002F Coins from object layer in Tiled\n    const coinObjects = map.getObjectLayer(\"Coins\")!.objects;\n    this.coins = this.physics.add.group();\n    coinObjects.forEach((obj) => {\n      const coin = this.coins.create(obj.x!, obj.y!, \"coin\");\n      coin.setScale(0.5);\n      coin.body.setAllowGravity(false);\n    });\n\n    this.physics.add.overlap(this.player, this.coins, this.collectCoin, undefined, this);\n\n    \u002F\u002F Camera\n    this.cameras.main.startFollow(this.player, true, 0.08, 0.08);\n    this.cameras.main.setBounds(0, 0, map.widthInPixels, map.heightInPixels);\n\n    \u002F\u002F Launch HUD as parallel scene\n    this.scene.launch(\"HUDScene\");\n  }\n\n  update() {\n    const cursors = this.input.keyboard!.createCursorKeys();\n\n    if (cursors.left.isDown) {\n      this.player.setVelocityX(-160);\n      this.player.anims.play(\"run\", true);\n      this.player.setFlipX(true);\n    } else if (cursors.right.isDown) {\n      this.player.setVelocityX(160);\n      this.player.anims.play(\"run\", true);\n      this.player.setFlipX(false);\n    } else {\n      this.player.setVelocityX(0);\n      this.player.anims.play(\"idle\", true);\n    }\n\n    \u002F\u002F Jump (only when touching ground)\n    if (cursors.up.isDown && this.player.body!.blocked.down) {\n      this.player.setVelocityY(-330);\n    }\n  }\n\n  private collectCoin(\n    _player: Phaser.GameObjects.GameObject,\n    coin: Phaser.GameObjects.GameObject,\n  ) {\n    (coin as Phaser.Physics.Arcade.Sprite).disableBody(true, true);\n    this.score += 10;\n    this.events.emit(\"score-changed\", this.score);\n\n    \u002F\u002F Particle burst effect\n    const particles = this.add.particles(coin.body!.position.x, coin.body!.position.y, \"sparkle\", {\n      speed: 100,\n      lifespan: 300,\n      quantity: 8,\n      scale: { start: 0.5, end: 0 },\n      emitting: false,\n    });\n    particles.explode();\n  }\n}\n```\n\n### Physics, Tweens, and Effects\n\n```typescript\n\u002F\u002F Arcade physics — fast, axis-aligned\nthis.physics.add.collider(player, enemies, onHit);\nthis.physics.add.overlap(bullet, enemies, onBulletHit);\nplayer.setVelocity(200, -300);\nplayer.setBounce(0.2);\nplayer.setDrag(100);\n\n\u002F\u002F Matter.js physics — complex shapes, joints, sensors\nconst ball = this.matter.add.circle(400, 200, 20, { restitution: 0.8 });\nconst constraint = this.matter.add.constraint(anchor, ball, 100, 0.1);\n\n\u002F\u002F Tweens — smooth animations\nthis.tweens.add({\n  targets: sprite,\n  y: sprite.y - 50,\n  alpha: 0,\n  duration: 500,\n  ease: \"Power2\",\n  onComplete: () => sprite.destroy(),\n});\n\n\u002F\u002F Screen shake\nthis.cameras.main.shake(200, 0.01);\n\n\u002F\u002F Time events\nthis.time.addEvent({\n  delay: 2000,\n  callback: spawnEnemy,\n  loop: true,\n});\n```\n\n## Installation\n\n```bash\n# New project with Vite\nnpm create vite@latest my-game -- --template vanilla-ts\ncd my-game\nnpm install phaser\nnpm run dev\n```\n\n## Best Practices\n\n1. **Scene system** — Use separate scenes for menu, game, HUD, pause, game-over; HUD as parallel scene overlay\n2. **Arcade physics for simple games** — AABB collision is fast and sufficient for most 2D games; Matter.js only when you need complex shapes\n3. **Tilemap integration** — Design levels in Tiled, export as JSON, load with `this.make.tilemap`; use object layers for spawn points\n4. **Object pooling** — Use `this.physics.add.group({ maxSize: 50 })` for bullets, particles, enemies; recycle instead of create\u002Fdestroy\n5. **Pixel art** — Set `pixelArt: true` and `roundPixels: true` in config; prevents blurry scaling on retina displays\n6. **Mobile input** — Add virtual joystick for touch; Phaser has built-in pointer events for multi-touch\n7. **Texture atlases** — Pack sprites into atlases (TexturePacker); reduces draw calls from 200+ to 5-10\n8. **Camera** — Use `startFollow` with lerp values (0.05-0.1) for smooth camera; set bounds to tilemap size\n",{},"main","def8531e65114c0fca8fb8551c1871ee0eed705c","skills\u002FTerminalSkills\u002Fskills\u002Fphaser",24,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub","https:\u002F\u002Fskillshub.wtf","https:\u002F\u002Fgithub.com\u002FComeOnOliver","AI & Blockchain Engineer\r\n","2026-06-24 22:07:19",{"source":7,"skillName":5,"commands":32,"prompt":42,"zipAvailable":43},[33,36,39],{"tool":34,"command":35},"npx","npx skills add ComeOnOliver\u002Fskillshub --skill phaser",{"tool":37,"command":38},"bunx","bunx skills add ComeOnOliver\u002Fskillshub --skill phaser",{"tool":40,"command":41},"pnpm","pnpm dlx skills add ComeOnOliver\u002Fskillshub --skill phaser","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002FTerminalSkills\u002Fskills\u002Fphaser\u002FSKILL.md",true,[],[46,60,70,79,85,92],{"skillNo":47,"name":48,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":49,"categories":50,"keywords":56,"publishedAt":18},"01M6FKJN13GMG4KY57J3QD8GY5","model-hierarchy-skill","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzscole\u002Fmodel-hierarchy-skill\u002Fmodel-hierarchy-skill\u002FSKILL.md",[51],{"categoryNo":52,"categoryName":53,"taxonomyType":54,"taxonomyTypeDesc":55},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[57,58,59],"model","model hierarchy","model hierarchy skill",{"skillNo":61,"name":62,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":63,"categories":64,"keywords":66,"publishedAt":18},"01M6FKJJJ6GCAMR4PPPRD12M5X","zoom-mcp","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-mcp\u002FSKILL.md",[65],{"categoryNo":52,"categoryName":53,"taxonomyType":54,"taxonomyTypeDesc":55},[67,68,69],"MCP","zoom","zoom mcp",{"skillNo":71,"name":72,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":73,"categories":74,"keywords":75,"publishedAt":18},"01M6FKJE3KYT3KPEZMEEHYKA6K","zoom-apps-sdk","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-apps-sdk\u002FSKILL.md",[],[76,77,78,68],"sdk","zoom apps sdk","apps",{"skillNo":80,"name":81,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":82,"categories":83,"keywords":84,"publishedAt":18},"01M6FKJ9EDH9Q5VWDF8HAJRSP0","windows","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwindows\u002FSKILL.md",[],[81],{"skillNo":86,"name":87,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":88,"categories":89,"keywords":91,"publishedAt":18},"01M6FKJ666BEEFC3AE9GJ72Q93","whiteboard","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwhiteboard\u002FSKILL.md",[90],{"categoryNo":52,"categoryName":53,"taxonomyType":54,"taxonomyTypeDesc":55},[87],{"skillNo":93,"name":94,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":95,"categories":96,"keywords":97,"publishedAt":18},"01M6FKJ21WFCDGTJQ2Q91T9DVW","websockets","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwebsockets\u002FSKILL.md",[],[94]]