From ef070b2cfb1467583749b39c39da485ed42c9345 Mon Sep 17 00:00:00 2001 From: Viktor Lidholt Date: Wed, 3 Jun 2015 15:05:55 -0700 Subject: [PATCH] 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 --- examples/game/lib/game_world.dart | 16 ++++------- examples/game/lib/image_map.dart | 37 +++++++++++++++++++++++++ examples/game/lib/sprite_box.dart | 46 ++++++++++++++++++++++++------- examples/game/lib/sprites.dart | 8 ++++-- examples/game/main.dart | 11 +++++++- 5 files changed, 93 insertions(+), 25 deletions(-) create mode 100644 examples/game/lib/image_map.dart diff --git a/examples/game/lib/game_world.dart b/examples/game/lib/game_world.dart index 2ce13ddcc..e066db98d 100644 --- a/examples/game/lib/game_world.dart +++ b/examples/game/lib/game_world.dart @@ -6,28 +6,22 @@ class GameWorld extends TransformNode { List 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++) { diff --git a/examples/game/lib/image_map.dart b/examples/game/lib/image_map.dart new file mode 100644 index 000000000..577df2a4e --- /dev/null +++ b/examples/game/lib/image_map.dart @@ -0,0 +1,37 @@ +part of sprites; + +typedef void ImageMapCallback(ImageMap preloader); + +class ImageMap { + + Map _images; + + int _totalNumImages = 0; + int _numLoadedImages = 0; + + ImageMapCallback _callback; + + ImageMap(List 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 diff --git a/examples/game/lib/sprite_box.dart b/examples/game/lib/sprite_box.dart index 4cc0834ce..5658dbd5b 100644 --- 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,21 +58,44 @@ 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; default: diff --git a/examples/game/lib/sprites.dart b/examples/game/lib/sprites.dart index 39c4db726..0dd62ca19 100644 --- 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'; \ No newline at end of file +part 'sprite_node.dart'; +part 'image_map.dart'; \ No newline at end of file diff --git a/examples/game/main.dart b/examples/game/main.dart index 4a584eb2d..9d54b06a0 100644 --- 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)); } -- GitLab