safex-webgl 1.0.0

package/test/DemoScene.ts

@@ -0,0 +1,108 @@
+import {
+  ClippingNode,
+  Color,
+  FontDefinition,
+  LabelTTF,
+  Rect,
+  Scene,
+  Sprite,
+  Vec2,
+  audioEngine,
+  director,
+  loader,
+  spriteFrameCache,
+  view,
+} from '../src'
+import { MotionStreak } from '../src/motion-streak'
+import { ProgressTimer } from '../src/progress-timer'
+import { Button, RichElementText, RichText, Scale9Sprite, Slider, Text } from '../src/ui'
+
+export class DemoScene extends Scene {
+  declare streak: MotionStreak
+  constructor() {
+    super()
+    console.log('BootScene constructor')
+    const motionStreak = new MotionStreak(1, 32, 13, Color.GREEN, 'particle.png')
+    motionStreak.setPosition(300, 400)
+    this.addChild(motionStreak)
+    this.streak = motionStreak
+    this.scheduleUpdate()
+  }
+  onEnter() {
+    super.onEnter()
+    loader.load(['button.png', 'sliderThumb.png', 'ui.plist', 'ui.png'], (err: any, resources: any) => {
+      if (err) {
+        console.error('Failed to load image', err)
+        return
+      }
+      console.log('Resources loaded', resources)
+      spriteFrameCache.addSpriteFrames('ui.plist', 'ui.png')
+      const sprite9 = new Scale9Sprite('button.png', Rect(10, 10, 20, 20))
+      sprite9.setContentSize(200, 234)
+      sprite9.setPosition(300, 900)
+      this.addChild(sprite9)
+      const sprite = new Sprite('button.png')
+      const sprite2 = new Sprite('button_plus.png')
+      const frame = spriteFrameCache.getSpriteFrame('ui/buttons/back')
+      const sprite3 = new Sprite(frame)
+      sprite2.setPosition(85, 226)
+      sprite3.setPosition(100, 200)
+      this.addChild(sprite3)
+      const mask = new ClippingNode(sprite3)
+      sprite2.setPosition(85, 226)
+      mask.setPosition(100, 200)
+      this.addChild(mask)
+      const timer = new ProgressTimer(sprite)
+      this.addChild(timer)
+      timer.setPercentage(60)
+      timer.setPosition(view.getDesignResolutionSize().width / 2, view.getDesignResolutionSize().height / 2)
+      timer.addChild(sprite2)
+      // console.log('sprite onEnter', timer)
+      timer.setType(ProgressTimer.TYPE_BAR)
+      timer.setMidpoint(Vec2(0, 0))
+      timer.setBarChangeRate(Vec2(1, 0))
+      const label = new LabelTTF('Hello World', 'Arial', 24)
+      label.setPosition(300, 200)
+      this.addChild(label)
+      const text = new Text('From Têxt', 'Arial', 24)
+      text.setPosition(500, 200)
+      this.addChild(text)
+      const rt = new RichText()
+      const fontDefinition = new FontDefinition()
+      fontDefinition.strokeEnabled = true
+      fontDefinition.strokeStyle = Color.GREEN
+      fontDefinition.lineWidth = 3
+      fontDefinition.fontName = 'Arial'
+      fontDefinition.fontSize = 48
+      const rtet = new RichElementText(1, fontDefinition, 255, 'rick text')
+      rt.pushBackElement(rtet)
+      rt.setPosition(200, 300)
+      this.addChild(rt)
+      const button = new Button('button.png')
+      button.setPosition(400, 300)
+      button.setTitleText('Click Me')
+      this.addChild(button)
+      button.addClickEventListener(() => {
+        console.log('Button clicked')
+        audioEngine.playEffect('Button.mp3', false)
+      })
+      const slider = new Slider('sliderTrack.png', 'sliderThumb.png')
+      slider.setPosition(400, 400)
+      this.addChild(slider)
+      // slider.loadSlidBallTextureNormal('sliderThumb.png')
+      slider.addEventListener((sender: Slider, type: number) => {
+        const percent = sender.getPercent()
+        console.log('Slider value changed', percent, type)
+      }, this)
+      console.log('Slider', slider)
+    })
+  }
+
+  update(dt: number) {
+    // console.log('BootScene update', dt)
+    this.streak.setPositionY(this.streak.getPositionY() + dt * 500)
+    if (this.streak.getPositionY() > director.getWinSize().height) {
+      this.streak.setPositionY(0)
+    }
+  }
+}

package/test/GraphicsTest.ts

@@ -0,0 +1,17 @@
+import { DrawNode, Vec2 } from '../src'
+import { Color, Scene } from '../src/core'
+
+export class GraphicsTest extends Scene {
+  onEnter() {
+    super.onEnter()
+    const draw = new DrawNode()
+    this.addChild(draw)
+    draw.drawRect(Vec2(100, 300), Vec2(200, 500), Color.RED, 0)
+    draw.drawCircle(Vec2(400, 500), 50, Math.PI * 0.5, 64, true, 11, Color.YELLOW)
+    draw.drawCircle(Vec2(400, 600), 50, (Math.PI * 2) / 3, 64, true, 11, Color.GREEN)
+    const points: Vec2[] = [Vec2(40, 1040), Vec2(540, 640), Vec2(840, 940), Vec2(740, 1040)]
+    draw.drawPoly(points, Color.BLUE, 20, Color.ORANGE)
+    draw.drawRect(Vec2(600, 110), Vec2(350, 245), Color.MAGENTA, 5, Color.WHITE)
+    draw.drawDot(Vec2(300, 1500), 50)
+  }
+}

package/test/ParticleScene.ts

@@ -0,0 +1,24 @@
+import { director, loader, textureCache } from '../src'
+import { Scene } from '../src/core'
+import { ParticleFireworks } from '../src/particle/examples'
+import { ParticleSystem } from '../src/particle/ParticleSystem'
+
+export class ParticleScene extends Scene {
+  onEnter() {
+    super.onEnter()
+    const { width, height } = director.getWinSize()
+    loader.load(['Spiral.plist', 'SmallSun.plist', 'base.png'], (err: any, resources: any) => {
+      const emitter = new ParticleSystem('Spiral.plist')
+      emitter.setPosition(width / 2, height / 3)
+      this.addChild(emitter)
+      const sun = new ParticleSystem('SmallSun.plist')
+      sun.setPosition(width / 2, height * 0.8)
+      this.addChild(sun)
+      const firework = new ParticleFireworks()
+      firework.setPosition(width / 3, height / 2)
+      const texture = textureCache.getTextureForKey('base.png')!
+      firework.setTexture(texture)
+      this.addChild(firework)
+    })
+  }
+}

package/test/TiledMapScene.ts

@@ -0,0 +1,14 @@
+import { loader, view } from '../src'
+import { Scene } from '../src/core'
+import { TMXTiledMap } from '../src/tilemap'
+
+export class TiledMapScene extends Scene {
+  onEnter() {
+    super.onEnter()
+    loader.load(['orthogonal-test1.tmx', 'orthogonal-test1.tsx'], (err: any, resources: any) => {
+      const map = new TMXTiledMap('orthogonal-test1.tmx')
+      map.setPosition(12, view.getDesignResolutionSize().height / 2)
+      this.addChild(map)
+    })
+  }
+}

package/test/index.ts

@@ -0,0 +1,28 @@
+import { director, game, global, sys, view } from '../src'
+import { ResolutionPolicy } from '../src/core'
+import { DemoScene } from './DemoScene'
+
+global._isContextMenuEnable = true
+game.run(
+  {
+    debugMode: 1,
+    showFPS: true,
+    frameRate: 60,
+    id: 'gameCanvas',
+    renderMode: 2,
+  },
+  function onStart() {
+    // Pass true to enable retina display, disabled by default to improve performance
+    view.enableRetina(sys.os === sys.OS_IOS)
+    // Adjust viewport meta
+    view.adjustViewPort(true)
+    // Setup the resolution policy and design resolution size
+    const width = 720
+    const height = 1280
+    const policy = width > height ? ResolutionPolicy.FIXED_HEIGHT : ResolutionPolicy.FIXED_WIDTH
+    view.setDesignResolutionSize(width, height, policy)
+    // The game will be resized when browser size change
+    view.resizeWithBrowserSize(true)
+    director.runScene(new DemoScene())
+  },
+)

package/vite.config.ts

@@ -0,0 +1,13 @@
+import { resolve } from 'path'
+import { defineConfig } from 'vite'
+import { viteSingleFile } from 'vite-plugin-singlefile'
+
+export default defineConfig({
+  publicDir: resolve('res'),
+  build: {
+    outDir: resolve(__dirname, 'safex-webgl'),
+    emptyOutDir: true,
+  },
+  server: { port: 5049 },
+  plugins: [viteSingleFile({ deleteInlinedFiles: true })],
+})