mirror of
https://github.com/flame-engine/flame.git
synced 2025-11-03 20:36:31 +08:00
Outsourcing svg support to an external library
This commit is contained in:
Erick Zanardo
@ -1,6 +1,7 @@
|
||||
# CHANGELOG
|
||||
|
||||
## [next]
|
||||
- Outsourcing SVG support to an external package
|
||||
|
||||
## 0.23.0
|
||||
- Add Joystick Component
|
||||
|
||||
70
doc/examples/svg/.gitignore
vendored
70
doc/examples/svg/.gitignore
vendored
@ -1,70 +0,0 @@
|
||||
# Miscellaneous
|
||||
*.class
|
||||
*.log
|
||||
*.pyc
|
||||
*.swp
|
||||
.DS_Store
|
||||
.atom/
|
||||
.buildlog/
|
||||
.history
|
||||
.svn/
|
||||
|
||||
# IntelliJ related
|
||||
*.iml
|
||||
*.ipr
|
||||
*.iws
|
||||
.idea/
|
||||
|
||||
# Visual Studio Code related
|
||||
.vscode/
|
||||
|
||||
# Flutter/Dart/Pub related
|
||||
**/doc/api/
|
||||
.dart_tool/
|
||||
.flutter-plugins
|
||||
.packages
|
||||
.pub-cache/
|
||||
.pub/
|
||||
/build/
|
||||
|
||||
# Android related
|
||||
**/android/**/gradle-wrapper.jar
|
||||
**/android/.gradle
|
||||
**/android/captures/
|
||||
**/android/gradlew
|
||||
**/android/gradlew.bat
|
||||
**/android/local.properties
|
||||
**/android/**/GeneratedPluginRegistrant.java
|
||||
|
||||
# iOS/XCode related
|
||||
**/ios/**/*.mode1v3
|
||||
**/ios/**/*.mode2v3
|
||||
**/ios/**/*.moved-aside
|
||||
**/ios/**/*.pbxuser
|
||||
**/ios/**/*.perspectivev3
|
||||
**/ios/**/*sync/
|
||||
**/ios/**/.sconsign.dblite
|
||||
**/ios/**/.tags*
|
||||
**/ios/**/.vagrant/
|
||||
**/ios/**/DerivedData/
|
||||
**/ios/**/Icon?
|
||||
**/ios/**/Pods/
|
||||
**/ios/**/.symlinks/
|
||||
**/ios/**/profile
|
||||
**/ios/**/xcuserdata
|
||||
**/ios/.generated/
|
||||
**/ios/Flutter/App.framework
|
||||
**/ios/Flutter/Flutter.framework
|
||||
**/ios/Flutter/Generated.xcconfig
|
||||
**/ios/Flutter/app.flx
|
||||
**/ios/Flutter/app.zip
|
||||
**/ios/Flutter/flutter_assets/
|
||||
**/ios/ServiceDefinitions.json
|
||||
**/ios/Runner/GeneratedPluginRegistrant.*
|
||||
|
||||
# Exceptions to above rules.
|
||||
!**/ios/**/default.mode1v3
|
||||
!**/ios/**/default.mode2v3
|
||||
!**/ios/**/default.pbxuser
|
||||
!**/ios/**/default.perspectivev3
|
||||
!/packages/flutter_tools/test/data/dart_dependencies_test/**/.packages
|
||||
@ -1,10 +0,0 @@
|
||||
# This file tracks properties of this Flutter project.
|
||||
# Used by Flutter tool to assess capabilities and perform upgrades etc.
|
||||
#
|
||||
# This file should be version controlled and should not be manually edited.
|
||||
|
||||
version:
|
||||
revision: f91df4abe1427fef8862c9e81b2e5af6fc05a67a
|
||||
channel: dev
|
||||
|
||||
project_type: app
|
||||
@ -1,3 +0,0 @@
|
||||
# svg
|
||||
|
||||
A sample Flame game showcasing hot to use Flame's SVG components
|
||||
@ -1,11 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 105">
|
||||
<g fill="#97C024" stroke="#97C024" stroke-linejoin="round" stroke-linecap="round">
|
||||
<path d="M14,40v24M81,40v24M38,68v24M57,68v24M28,42v31h39v-31z" stroke-width="12"/>
|
||||
<path d="M32,5l5,10M64,5l-6,10 " stroke-width="2"/>
|
||||
</g>
|
||||
<path d="M22,35h51v10h-51zM22,33c0-31,51-31,51,0" fill="#97C024"/>
|
||||
<g fill="#FFF">
|
||||
<circle cx="36" cy="22" r="2"/>
|
||||
<circle cx="59" cy="22" r="2"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 471 B |
@ -1,38 +0,0 @@
|
||||
import 'package:flame/game.dart';
|
||||
import 'package:flame/svg.dart';
|
||||
import 'package:flame/position.dart';
|
||||
import 'package:flame/components/component.dart' show SvgComponent;
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
void main() {
|
||||
WidgetsFlutterBinding.ensureInitialized();
|
||||
|
||||
final game = MyGame();
|
||||
runApp(game.widget);
|
||||
}
|
||||
|
||||
class MyGame extends BaseGame {
|
||||
Svg svgInstance;
|
||||
SvgComponent android;
|
||||
|
||||
MyGame() {
|
||||
_start();
|
||||
}
|
||||
|
||||
void _start() {
|
||||
svgInstance = Svg('android.svg');
|
||||
android = SvgComponent.fromSvg(100, 100, svgInstance);
|
||||
android.x = 100;
|
||||
android.y = 100;
|
||||
|
||||
add(android);
|
||||
}
|
||||
|
||||
@override
|
||||
void render(Canvas canvas) {
|
||||
super.render(canvas);
|
||||
|
||||
svgInstance.renderPosition(canvas, Position(100, 200), 300, 300);
|
||||
}
|
||||
}
|
||||
@ -1,21 +0,0 @@
|
||||
name: svg
|
||||
description: Flame sample for using SVG images
|
||||
|
||||
version: 1.0.0+1
|
||||
|
||||
environment:
|
||||
sdk: ">=2.1.0 <3.0.0"
|
||||
|
||||
dependencies:
|
||||
flutter:
|
||||
sdk: flutter
|
||||
flame:
|
||||
path: ../../../
|
||||
|
||||
dev_dependencies:
|
||||
flutter_test:
|
||||
sdk: flutter
|
||||
|
||||
flutter:
|
||||
assets:
|
||||
- assets/android.svg
|
||||
@ -68,7 +68,9 @@ See example [here](/doc/examples/sprite_batch).
|
||||
|
||||
Flame provides a simple API to render SVG images in your game.
|
||||
|
||||
To use it just import the `Svg` class from `'package:flame/svg.dart'`, and use the following snippet to render it on the canvas:
|
||||
Svg support is provided by the `flame_svg` external package, be sure to put it on your pubspec to use it
|
||||
|
||||
To use it just import the `Svg` class from `'package:flame_svg/flame_svg.dart'`, and use the following snippet to render it on the canvas:
|
||||
|
||||
```dart
|
||||
Svg svgInstance = Svg('android.svg');
|
||||
|
||||
@ -4,7 +4,6 @@ import 'dart:ui';
|
||||
import 'package:flutter/painting.dart';
|
||||
import 'package:meta/meta.dart';
|
||||
|
||||
import '../svg.dart';
|
||||
import '../sprite.dart';
|
||||
import '../position.dart';
|
||||
import '../anchor.dart';
|
||||
@ -172,56 +171,3 @@ abstract class PositionComponent extends Component {
|
||||
_effects.removeWhere((e) => e.hasFinished());
|
||||
}
|
||||
}
|
||||
|
||||
/// A [PositionComponent] that renders a single [Sprite] at the designated position, scaled to have the designated size and rotated to the designated angle.
|
||||
///
|
||||
/// This is the most commonly used child of [Component].
|
||||
class SpriteComponent extends PositionComponent {
|
||||
Sprite sprite;
|
||||
Paint overridePaint;
|
||||
|
||||
SpriteComponent();
|
||||
|
||||
SpriteComponent.square(double size, String imagePath)
|
||||
: this.rectangle(size, size, imagePath);
|
||||
|
||||
SpriteComponent.rectangle(double width, double height, String imagePath)
|
||||
: this.fromSprite(width, height, Sprite(imagePath));
|
||||
|
||||
SpriteComponent.fromSprite(double width, double height, this.sprite) {
|
||||
this.width = width;
|
||||
this.height = height;
|
||||
}
|
||||
|
||||
@override
|
||||
void render(Canvas canvas) {
|
||||
prepareCanvas(canvas);
|
||||
sprite.render(canvas,
|
||||
width: width, height: height, overridePaint: overridePaint);
|
||||
}
|
||||
|
||||
@override
|
||||
bool loaded() {
|
||||
return sprite != null && sprite.loaded() && x != null && y != null;
|
||||
}
|
||||
}
|
||||
|
||||
class SvgComponent extends PositionComponent {
|
||||
Svg svg;
|
||||
|
||||
SvgComponent.fromSvg(double width, double height, this.svg) {
|
||||
this.width = width;
|
||||
this.height = height;
|
||||
}
|
||||
|
||||
@override
|
||||
void render(Canvas canvas) {
|
||||
prepareCanvas(canvas);
|
||||
svg.render(canvas, width, height);
|
||||
}
|
||||
|
||||
@override
|
||||
bool loaded() {
|
||||
return svg != null && svg.loaded() && x != null && y != null;
|
||||
}
|
||||
}
|
||||
|
||||
51
lib/svg.dart
51
lib/svg.dart
@ -1,51 +0,0 @@
|
||||
import 'dart:ui';
|
||||
import 'package:flutter_svg/flutter_svg.dart';
|
||||
|
||||
import 'flame.dart';
|
||||
import 'position.dart';
|
||||
|
||||
class Svg {
|
||||
DrawableRoot svgRoot;
|
||||
Size size;
|
||||
|
||||
Svg(String fileName) {
|
||||
Flame.assets.readFile(fileName).then((svgString) async {
|
||||
svgRoot = await svg.fromSvgString(svgString, svgString);
|
||||
});
|
||||
}
|
||||
|
||||
/// Renders the svg on the [canvas] using the dimensions provided on [width] and [height]
|
||||
///
|
||||
/// If not loaded, does nothing
|
||||
void render(Canvas canvas, double width, double height) {
|
||||
if (!loaded()) {
|
||||
return;
|
||||
}
|
||||
|
||||
svgRoot.scaleCanvasToViewBox(canvas, Size(width, height));
|
||||
svgRoot.draw(canvas, null);
|
||||
}
|
||||
|
||||
/// Renders the svg on the [canvas] on the given [position] using the dimensions provided on [width] and [height]
|
||||
///
|
||||
/// If not loaded, does nothing
|
||||
void renderPosition(
|
||||
Canvas canvas,
|
||||
Position position,
|
||||
double width,
|
||||
double height,
|
||||
) {
|
||||
if (!loaded()) {
|
||||
return;
|
||||
}
|
||||
|
||||
canvas.save();
|
||||
canvas.translate(position.x, position.y);
|
||||
render(canvas, width, height);
|
||||
canvas.restore();
|
||||
}
|
||||
|
||||
bool loaded() {
|
||||
return svgRoot != null;
|
||||
}
|
||||
}
|
||||
@ -13,7 +13,6 @@ dependencies:
|
||||
synchronized: ^2.1.0
|
||||
tiled: ^0.5.0
|
||||
convert: ^2.0.1
|
||||
flutter_svg: ^0.18.0
|
||||
flare_flutter: ^2.0.1
|
||||
meta: ^1.1.8
|
||||
|
||||
|
||||
Reference in New Issue
Block a user