次世代シーンAPI

[nakasyou]

こんな感じで描きたい

import {
  type SceneContext,
  useFrame,
  Asset,
  Sprite,
  utils,
} from "kagurajs"
import goboImage from "../assets/govo.svg"

const MyScene = async (ctx: SceneContext) => *function() {
  const gobo = await new Sprite().init({
    asset: await new Asset().fromURL(goboImage)
  })
  ctx.addChild(gobo)
  ctx.use(useFrame(()=>{
    gobo.y += 1
  })) // Frame API
  for(const _ of utils.range(100)) {
    yield gobo.x += 1
  }  // Step API
}()

以下と等価

import {
  Sprite,
  Scene,
  Asset,
  type SceneConstructorOptions,
  utils,
} from "kagurajs"
import goboImage from "../assets/gobo.svg"

export default class extends Scene{
  gobo: Sprite
  speed?: number
  constructor (sceneConstructorOptions: SceneConstructorOptions) {
    super(sceneConstructorOptions)
    this.gobo = {} as Sprite
  }
  async init(){
    this.gobo = await new Sprite().init({
      asset: await new Asset().fromURL(goboImage)
    })   
    this.addChild(this.gobo)
  }
  async frame(){
    this.gobo.y += 1
  }
  *steps(){
    for(const _ of utils.range(100)) {
      yield this.gobo.x += 1
    }  // Step API
  }
}

絶対次世代の方が描きやすい！

[nakasyou]

Hooks APIとでも名付けようかな()

import時に、

import { useFrame } from "kagura/hooks"

の方がしっくりくる(Reactみたい)

[EdamAme-x]

一応客観的意見やけど 良い感じにわかりやすいからええと思う

[nakasyou]

import {
  type SceneContext,
  useFrame,
  Asset,
  Sprite,
  utils,
} from "kagurajs"
import goboImage from "../assets/govo.svg"

const MyScene = async function * (ctx: SceneContext) {
  const gobo = await new Sprite().init({
    asset: await new Asset().fromURL(goboImage)
  })
  ctx.addChild(gobo)
  ctx.use(useFrame(()=>{
    gobo.y += 1
  })) // Frame API
  for(const _ of utils.range(100)) {
    yield gobo.x += 1
  }  // Step API
}