Sky example game enhancements, adds preloading of images and adds transform modes to SpriteBox

R=eseidel@chromium.org Review URL: https://codereview.chromium.org/1149183004

Sky example game enhancements, adds preloading of images and adds transform modes to SpriteBox
R=eseidel@chromium.org Review URL: https://codereview.chromium.org/1149183004
ef070b2c · Viktor Lidholt · a18d06f3 · ef070b2c · ef070b2c · ef070b2c
5 changed file
--- a/examples/game/lib/game_world.dart
+++ b/examples/game/lib/game_world.dart
@@ -6,28 +6,22 @@ class GameWorld extends TransformNode {
  List<Body> bodies = [];
  Image _image;
  
-  GameWorld(double width, double height) {
-    this.width = width;
-    this.height = height;
+  GameWorld(ImageMap images) {
+    this.width = 1024.0;
+    this.height = 1024.0;
    
    world = new World.withGravity(new Vector2(0.0, 0.0));
    
    // Load and add background
-    Image imgBg = new Image()..src="https://raw.githubusercontent.com/slembcke/GalacticGuardian.spritebuilder/GDC/Packages/SpriteBuilder%20Resources.sbpack/resources-auto/BurnTexture.png";
+    Image imgBg = images["https://raw.githubusercontent.com/slembcke/GalacticGuardian.spritebuilder/GDC/Packages/SpriteBuilder%20Resources.sbpack/resources-auto/BurnTexture.png"];
    SpriteNode sprtBg = new SpriteNode.withImage(imgBg);
    sprtBg.width = width;
    sprtBg.height = height;
    sprtBg.pivot = new Vector2(0.0, 0.0);
    this.children.add(sprtBg);

-    SpriteNode sprtCenter = new SpriteNode.withImage(imgBg);
-    sprtCenter.width = 32.0;
-    sprtCenter.height = 32.0;
-    sprtCenter.position = new Vector2(512.0, 512.0);
-    this.children.add(sprtCenter);
-
    // Load asteroid image
-    _image = new Image()..src="https://raw.githubusercontent.com/slembcke/GalacticGuardian.spritebuilder/GDC/Packages/SpriteBuilder%20Resources.sbpack/Sprites/resources-auto/asteroid_big_002.png";
+    _image = images["https://raw.githubusercontent.com/slembcke/GalacticGuardian.spritebuilder/GDC/Packages/SpriteBuilder%20Resources.sbpack/Sprites/resources-auto/asteroid_big_002.png"];

    // Add some asteroids to the game world
    for (int i = 0; i < 50; i++) {

--- a/examples/game/lib/image_map.dart
+++ b/examples/game/lib/image_map.dart
+part of sprites;
+
+typedef void ImageMapCallback(ImageMap preloader);
+
+class ImageMap {
+
+  Map<String, Image> _images;
+
+  int _totalNumImages = 0;
+  int _numLoadedImages = 0;
+
+  ImageMapCallback _callback;
+
+  ImageMap(List<String> urls, ImageMapCallback this._callback) {
+    _images = new Map();
+    _totalNumImages = urls.length;
+    urls.forEach(_addURL);
+  }
+
+  void _addURL(String url) {
+    image_cache.load(url, (Image image) {
+      // Store reference to image
+      _images[url] = image;
+
+      // Check if all images are loaded
+      _numLoadedImages++;
+      if (_numLoadedImages==_totalNumImages) {
+        // Everything loaded, make callback
+        _callback(this);
+      }
+    });
+  }
+
+  Image getImage(String url) => _images[url];
+
+  Image operator [](String url) => _images[url];
+}
\ No newline at end of file
--- a/examples/game/lib/sprite_box.dart
+++ b/examples/game/lib/sprite_box.dart
@@ -19,8 +19,8 @@ class SpriteBox extends RenderBox {
  int _numFrames = 0;

  SpriteBoxTransformMode transformMode;
-  double systemWidth;
-  double systemHeight;
+  double _systemWidth;
+  double _systemHeight;

  SpriteBox(TransformNode rootNode, [SpriteBoxTransformMode mode = SpriteBoxTransformMode.nativePoints, double width=1024.0, double height=1024.0]) {
    // Setup root node
@@ -28,12 +28,15 @@ class SpriteBox extends RenderBox {

    // Setup transform mode
    transformMode = mode;
-    systemWidth = width;
-    systemHeight = height;
+    _systemWidth = width;
+    _systemHeight = height;

    _scheduleTick();
  }

+  double get systemWidth => _systemWidth;
+  double get systemHeight => _systemHeight;
+
  void performLayout() {
    size = constraints.constrain(new Size.infinite());
  }
@@ -55,20 +58,43 @@ class SpriteBox extends RenderBox {

    switch(transformMode) {
      case SpriteBoxTransformMode.stretch:
-        scaleX = size.width/systemWidth;
-        scaleY = size.height/systemHeight;
+        scaleX = size.width/_systemWidth;
+        scaleY = size.height/_systemHeight;
        break;
      case SpriteBoxTransformMode.letterbox:
-        scaleX = size.width/systemWidth;
-        scaleY = size.height/systemHeight;
+        scaleX = size.width/_systemWidth;
+        scaleY = size.height/_systemHeight;
        if (scaleX > scaleY) {
          scaleY = scaleX;
-          offsetY = (size.height - scaleY * systemHeight)/2.0;
+          offsetY = (size.height - scaleY * _systemHeight)/2.0;
        }
        else {
          scaleX = scaleY;
-          offsetX = (size.width - scaleX * systemWidth)/2.0;
+          offsetX = (size.width - scaleX * _systemWidth)/2.0;
+        }
+        break;
+      case SpriteBoxTransformMode.scaleToFit:
+        scaleX = size.width/_systemWidth;
+        scaleY = size.height/_systemHeight;
+        if (scaleX < scaleY) {
+          scaleY = scaleX;
+          offsetY = (size.height - scaleY * _systemHeight)/2.0;
        }
+        else {
+          scaleX = scaleY;
+          offsetX = (size.width - scaleX * _systemWidth)/2.0;
+        }
+        break;
+      case SpriteBoxTransformMode.fixedWidth:
+        scaleX = size.width/_systemWidth;
+        scaleY = scaleX;
+        _systemHeight = size.height/scaleX;
+        print("systemHeight: $_systemHeight");
+        break;
+      case SpriteBoxTransformMode.fixedHeight:
+        scaleY = size.height/_systemHeight;
+        scaleX = scaleY;
+        _systemWidth = size.width/scaleY;
        break;
      case SpriteBoxTransformMode.nativePoints:
        break;

--- a/examples/game/lib/sprites.dart
+++ b/examples/game/lib/sprites.dart
@@ -4,10 +4,12 @@ import 'dart:sky';
 import 'dart:math' as Math;
 import 'package:vector_math/vector_math_64.dart';
 import 'package:sky/framework/app.dart';
-import 'package:sky/framework/rendering/render_box.dart';
-import 'package:sky/framework/rendering/render_node.dart';
+import 'package:sky/framework/rendering/box.dart';
+import 'package:sky/framework/rendering/node.dart';
 import 'package:sky/framework/scheduler.dart' as scheduler;
+import 'package:sky/framework/net/image_cache.dart' as image_cache;

 part 'sprite_box.dart';
 part 'transform_node.dart';
 part 'sprite_node.dart';
+part 'image_map.dart';
\ No newline at end of file
--- a/examples/game/main.dart
+++ b/examples/game/main.dart
@@ -6,6 +6,15 @@ import 'package:sky/framework/app.dart';
 AppView app;

 void main() {
+  // Load images
+  new ImageMap([
+      "https://raw.githubusercontent.com/slembcke/GalacticGuardian.spritebuilder/GDC/Packages/SpriteBuilder%20Resources.sbpack/resources-auto/BurnTexture.png",
+      "https://raw.githubusercontent.com/slembcke/GalacticGuardian.spritebuilder/GDC/Packages/SpriteBuilder%20Resources.sbpack/Sprites/resources-auto/asteroid_big_002.png",
+    ],
+    allLoaded);
+}
+
+void allLoaded(ImageMap loader) {
  // Create a new app with the sprite box that contains our game world
-  app = new AppView(new SpriteBox(new GameWorld(1024.0, 1024.0),SpriteBoxTransformMode.letterbox));
+  app = new AppView(new SpriteBox(new GameWorld(loader),SpriteBoxTransformMode.letterbox));
 }