Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Add network assets package. #2314

Merged
merged 25 commits into from
Mar 18, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
00c582a
feat: adding flame network image package
erickzanardo Jan 26, 2023
6309175
feat: adding implementation
erickzanardo Jan 29, 2023
153054e
adding example
erickzanardo Jan 29, 2023
4d43652
removing widget test
erickzanardo Jan 29, 2023
70b449d
improving tests
erickzanardo Jan 30, 2023
1d4737c
test and docs
erickzanardo Feb 2, 2023
84c8bf7
Merge branch 'main' into erick.flame-network-image
erickzanardo Feb 2, 2023
ce5a39d
some fixes
erickzanardo Feb 2, 2023
aacba5c
Merge branch 'main' into erick.flame-network-image
erickzanardo Feb 21, 2023
9fabebb
feat: package repurpose to be able to load any kind of assets
erickzanardo Feb 21, 2023
e29a41d
fix md lint
erickzanardo Feb 21, 2023
42b218d
fix md lint
erickzanardo Feb 21, 2023
94e2194
fix dev dep
erickzanardo Feb 21, 2023
8e6880c
updting LICENSE
erickzanardo Feb 21, 2023
fedce82
pr suggestions
erickzanardo Mar 6, 2023
15b7775
removing example folder
erickzanardo Mar 6, 2023
5feaa43
md fix
erickzanardo Mar 6, 2023
5228961
Merge branch 'main' into erick.flame-network-image
erickzanardo Mar 6, 2023
18323db
fix spell
erickzanardo Mar 6, 2023
420dec7
Update packages/flame_network_assets/CHANGELOG.md
erickzanardo Mar 6, 2023
d114c20
pr suggestions
erickzanardo Mar 18, 2023
97540df
Apply suggestions from code review
erickzanardo Mar 18, 2023
7c69cd9
Update packages/flame_network_assets/README.md
erickzanardo Mar 18, 2023
c2d4cee
pr
erickzanardo Mar 18, 2023
aa2030f
Merge branch 'main' into erick.flame-network-image
erickzanardo Mar 18, 2023
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .github/.cspell/gamedev_dictionary.txt
Original file line number Diff line number Diff line change
Expand Up @@ -154,3 +154,4 @@ viewport's
viewports
vsync
widget's
unawaited
3 changes: 3 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,9 @@ pubspec.lock
.pub/
android/
ios/
macos/
windows/
linux/
desktop/
build/
coverage/
Expand Down
6 changes: 6 additions & 0 deletions doc/bridge_packages/bridge_packages.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,11 @@ A Box2D physics engine (bridge package for [Forge2D]).
Use isolates to offload heavy computations to another thread.
:::

:::{package} flame_network_assets

Fetch assets over the network.
:::

:::{package} flame_oxygen

Replace FCS with the Oxygen Entity Component System.
Expand Down Expand Up @@ -68,6 +73,7 @@ flame_fire_atlas <flame_fire_atlas/flame_fire_atlas.md>
flame_forge2d <flame_forge2d/flame_forge2d.md>
flame_isolate <flame_isolate/flame_isolate.md>
flame_lottie <flame_lottie/flame_lottie.md>
flame_network_assets <flame_network_assets/flame_network_assets.md>
flame_oxygen <flame_oxygen/flame_oxygen.md>
flame_rive <flame_rive/flame_rive.md>
flame_splash_screen <flame_splash_screen/flame_splash_screen.md>
Expand Down
35 changes: 35 additions & 0 deletions doc/bridge_packages/flame_network_assets/flame_network_assets.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
# FlameNetworkAssets

`FlameNetworkAssets` is a bridge package focused on providing a solution to fetch, and cache assets
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
`FlameNetworkAssets` is a bridge package focused on providing a solution to fetch, and cache assets
`FlameNetworkAssets` is a bridge package focused on providing a solution to fetch and cache assets

from the network.

The `FlameNetworkAssets` class provides an abstraction that should be extended in order to create
asset specific handler.

By default, the package relies on the `http` package to make http requests, and `path_provider`
to get the place to store the local cache, to use a different approach for those, use the
optional arguments in the constructor.
Comment on lines +9 to +11
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
By default, the package relies on the `http` package to make http requests, and `path_provider`
to get the place to store the local cache, to use a different approach for those, use the
optional arguments in the constructor.
By default, the package relies on the `http` package to make http requests, and `path_provider`
to get the place to store the local cache; to use a different approach for those, use the
optional arguments in the constructor.


This package bundles a specific asset handler class for images:

```dart
final networkAssets = FlameNetworkImages();
final playerSprite = await networkAssets.load('https://url.com/image.png');
```

To create a specific asset handler class, you just need to extend the `FlameNetworkAssets` class
and define the `decodeAsset` and `endcodeAsset` arguments:

```dart
class FlameNetworkCustomAsset extends FlameNetworkAssets<CustomAsset> {
FlameNetworkImages({
super.get,
super.getAppDirectory,
super.cacheInMemory,
super.cacheInStorage,
}) : super(
decodeAsset: (bytes) => CustomAsset.decode(bytes),
encodeAsset: (CustomAsset asset) => asset.encode(),
);
}
erickzanardo marked this conversation as resolved.
Show resolved Hide resolved
```
26 changes: 26 additions & 0 deletions doc/flame/rendering/images.md
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,32 @@ class MyGame extends Game {
```


## Loading images over the network

The Flame core package doesn't offer a built in method to loading images from the network.

The reason for that is that Flutter/Dart does not have a built in http client, which requires
a package to be used and since there are a couple of packages available out there, we refrain
from forcing the user to use a specific package.

With that said, it is quite simple to load images from the network once a http client package
is chosen by the user. The following snippet shows how an `Image` can be fetched from the web
using the [http](https://pub.dev/packages/http) package.

```dart
import 'package:http/http.dart' as http;
import 'package:flutter/painting.dart';

final response = await http.get('https://url.com/image.png');
final image = await decodeImageFromList(response.bytes);
```

```{note}
Check [`flame_network_assets`](https://pub.dev/packages/flame_network_assets)
for a ready to use network assets solution that provides a built in cache.
```
Comment on lines +143 to +146
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we could probably be even more persuasive about using the flame_network_assets, and frame importing http "by hand" as an alternative



## Sprite

Flame offers a `Sprite` class that represents an image, or a region of an image.
Expand Down
10 changes: 10 additions & 0 deletions packages/flame_network_assets/.metadata
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
# 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: b06b8b2710955028a6b562f5aa6fe62941d6febf
channel: stable

project_type: package
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

do we need an empty file at all?

Empty file.
21 changes: 21 additions & 0 deletions packages/flame_network_assets/LICENSE
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
MIT License

Copyright (c) 2023 Blue Fire

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
25 changes: 25 additions & 0 deletions packages/flame_network_assets/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
# flame_network_assets

<!-- markdownlint-disable MD013 -->
<p align="center">
<a href="https://flame-engine.org">
<img alt="flame" width="200px" src="https://user-images.githubusercontent.com/6718144/101553774-3bc7b000-39ad-11eb-8a6a-de2daa31bd64.png">
</a>
</p>

<p align="center">
Adds network images support to <a href="https://github.com/flame-engine/flame">Flame</a>.
</p>

<p align="center">
<img src="https://github.com/flame-engine/flame_network_image/workflows/Lint/badge.svg?branch=master&event=push" alt="Test" />
<a title="Discord" href="https://discord.gg/pxrBmy4" ><img src="https://img.shields.io/discord/509714518008528896.svg" /></a>
Comment on lines +15 to +16
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why not the 4 standard badges? (I know the package hasnt been released yet if you add as soon as it is it will work)

</p>
<!-- markdownlint-enable MD013 -->

---

This package makes it easy to use and cache assets from the network inside a Flame game.

For instructions on how to use this package to load images,
check [Flame docs](https://docs.flame-engine.org/1.6.0/bridge_packages/flame_network_assets/flame_network_assets.html).
5 changes: 5 additions & 0 deletions packages/flame_network_assets/analysis_options.yaml
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
include: package:flame_lint/analysis_options.yaml

linter:
rules:
- public_member_api_docs
45 changes: 45 additions & 0 deletions packages/flame_network_assets/example/.metadata
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
# 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.

version:
revision: b06b8b2710955028a6b562f5aa6fe62941d6febf
channel: stable

project_type: app

# Tracks metadata for the flutter migrate command
migration:
platforms:
- platform: root
create_revision: b06b8b2710955028a6b562f5aa6fe62941d6febf
base_revision: b06b8b2710955028a6b562f5aa6fe62941d6febf
- platform: android
create_revision: b06b8b2710955028a6b562f5aa6fe62941d6febf
base_revision: b06b8b2710955028a6b562f5aa6fe62941d6febf
- platform: ios
create_revision: b06b8b2710955028a6b562f5aa6fe62941d6febf
base_revision: b06b8b2710955028a6b562f5aa6fe62941d6febf
- platform: linux
create_revision: b06b8b2710955028a6b562f5aa6fe62941d6febf
base_revision: b06b8b2710955028a6b562f5aa6fe62941d6febf
- platform: macos
create_revision: b06b8b2710955028a6b562f5aa6fe62941d6febf
base_revision: b06b8b2710955028a6b562f5aa6fe62941d6febf
- platform: web
create_revision: b06b8b2710955028a6b562f5aa6fe62941d6febf
base_revision: b06b8b2710955028a6b562f5aa6fe62941d6febf
- platform: windows
create_revision: b06b8b2710955028a6b562f5aa6fe62941d6febf
base_revision: b06b8b2710955028a6b562f5aa6fe62941d6febf

# User provided section

# List of Local paths (relative to this file) that should be
# ignored by the migrate tool.
#
# Files that are not part of the templates will be ignored by default.
unmanaged_files:
- 'lib/main.dart'
- 'ios/Runner.xcodeproj/project.pbxproj'
3 changes: 3 additions & 0 deletions packages/flame_network_assets/example/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
# flame_network_images example

An example app that shows how to use the `flame_network_images` package.
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
include: package:flame_lint/analysis_options.yaml
43 changes: 43 additions & 0 deletions packages/flame_network_assets/example/lib/main.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import 'dart:async';

import 'package:flame/components.dart';
import 'package:flame/extensions.dart';
import 'package:flame/game.dart';
import 'package:flame/input.dart';
import 'package:flame_network_assets/flame_network_assets.dart';
import 'package:flutter/material.dart' hide Image;

void main() {
runApp(const GameWidget.controlled(gameFactory: MyGame.new));
}

class MyGame extends FlameGame with TapDetector {
final networkImages = FlameNetworkImages();
late Image playerSprite;

@override
Future<void> onLoad() async {
playerSprite = await networkImages.load(
'https://examples.flame-engine.org/assets/assets/images/bomb_ptero.png',
);
}

@override
bool onTapUp(TapUpInfo info) {
add(
SpriteAnimationComponent.fromFrameData(
playerSprite,
SpriteAnimationData.sequenced(
textureSize: Vector2(48, 32),
amount: 4,
stepTime: .2,
),
size: Vector2(100, 50),
anchor: Anchor.center,
position: info.eventPosition.game,
),
);

return true;
}
}
17 changes: 17 additions & 0 deletions packages/flame_network_assets/example/pubspec.yaml
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
name: flame_network_assets_example
description: A flame network assets example.
publish_to: 'none'

version: 1.0.0+1

environment:
sdk: '>=2.18.0 <3.0.0'

dependencies:
flame: ^1.6.0
flame_network_assets: ^0.1.0
flutter:
sdk: flutter

dev_dependencies:
flame_lint: ^0.1.3
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

use 0.2.0 ?

5 changes: 5 additions & 0 deletions packages/flame_network_assets/lib/flame_network_assets.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
library flame_network_assets;

export 'src/flame_asset_response.dart';
export 'src/flame_network_assets.dart';
export 'src/flame_network_images.dart';
19 changes: 19 additions & 0 deletions packages/flame_network_assets/lib/src/flame_asset_response.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import 'dart:typed_data';

/// {@template flame_assets_response}
/// A class containing the relevant http attributes to
/// Flame Assets Network package.
/// {@endtemplate}
class FlameAssetResponse {
/// {@macro flame_assets_response}
const FlameAssetResponse({
required this.statusCode,
required this.bytes,
});

/// Http status code.
final int statusCode;

/// response bytes.
final Uint8List bytes;
}
Loading