火炎エンジン、フラッタの上に構築されたゲームエンジン
Flutter、クロスプラットフォームの美しいUIを構築することができますモダンなUIツールキット.しかし、それはまた、ゲームを開発するために使用できることを知っていますか?
紹介Flame Engine、2 Dゲームの任意の種類を作成することができますすべてのフラッターサポートされているプラットフォームでは、Webやデスクトップのようにそれを実行するフラッターの上に構築された2 Dゲームフレームワークを紹介.
この記事では、炎で始められる3つの速いサンプルをあなたに示します.試料はhereである.
開始するには、flameの依存関係をPubspecに追加します.YSL
紹介Flame Engine、2 Dゲームの任意の種類を作成することができますすべてのフラッターサポートされているプラットフォームでは、Webやデスクトップのようにそれを実行するフラッターの上に構築された2 Dゲームフレームワークを紹介.
この記事では、炎で始められる3つの速いサンプルをあなたに示します.試料はhereである.
単純2次元運動
開始するには、flameの依存関係をPubspecに追加します.YSL
dependencies:
flame: 1.1.0
次のスニペットを使用します.import 'package:flame/game.dart';
import 'package:flame/input.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
// Create a class that extends from FlameGame, use the
// KeyboardEvents mixin to receive keyboard input events
class Basic2DMovement extends FlameGame with KeyboardEvents {
// This will be the size of the moving object
static const _size = 100.0;
// With this paint we will give it a color
final paint = Paint()..color = Colors.lightGreen;
// Use this variables to store the position of the object
double _x = 0.0;
double _y = 0.0;
// This render function will be called in
// each frame to paint the object
@override
void render(Canvas canvas) {
super.render(canvas);
// This rect represents our object (a square)
final rect = Rect.fromLTWH(_x, _y, _size, _size);
// Draw the object with the provided Canvas
canvas.drawRect(rect, paint);
}
@override
KeyEventResult onKeyEvent(
RawKeyEvent event,
Set<LogicalKeyboardKey> keysPressed,
) {
// Store if the key is down
final isKeyDown = event is RawKeyDownEvent;
// Alter the x, y values according to the current keys pressed
if (keysPressed.contains(LogicalKeyboardKey.arrowLeft) && isKeyDown) {
_x -= 10.0;
} else if (keysPressed.contains(LogicalKeyboardKey.arrowRight) &&
isKeyDown) {
_x += 10.0;
}
if (keysPressed.contains(LogicalKeyboardKey.arrowUp) && isKeyDown) {
_y -= 10.0;
} else if (keysPressed.contains(LogicalKeyboardKey.arrowDown) &&
isKeyDown) {
_y += 10.0;
}
// Return this value to acknowledge that the input
// has been managed
return KeyEventResult.handled;
}
}
このサンプルを実行するには、このクラスをrunApp()
で呼び出されたGameObject内でラップする必要があります.void main() {
runApp(GameWidget(game: Basic2DMovement()));
}
高度二次元運動
import 'package:flame/game.dart';
import 'package:flame/input.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
class Advanced2DMovement extends FlameGame with KeyboardEvents {
static const _size = 100.0;
final paint = Paint()..color = Colors.lightGreen;
// This will be the speed of the object
static const double _speed = 100.0;
// This friction will apply if there are no input so the object
// does not stop immediately
static const double _friction = 0.9;
// Store the position in a Vector2
Vector2 _position = Vector2.zero();
// This vector is the current momentum of the object
Vector2 _movementVector = Vector2.zero();
// This booleans will indicate us the current pressed keys
bool _isPressingLeft = false;
bool _isPressingRight = false;
bool _isPressingUp = false;
bool _isPressingDown = false;
// The update function will be called in each frame
// with the time from the last frame as the delta value,
// this way we can ensure a framerate
// independent movement
@override
void update(double delta) {
super.update(delta);
// Create a vector to store the current input
final Vector2 inputVector = Vector2.zero();
// Alter the input vector according to the current pressed keys
if (_isPressingLeft) {
inputVector.x -= 1.0;
} else if (_isPressingRight) {
inputVector.x += 1.0;
}
if (_isPressingUp) {
inputVector.y -= 1.0;
} else if (_isPressingDown) {
inputVector.y += 1.0;
}
// If there are some input...
if (!inputVector.isZero()) {
// Assign the input vector to the movement vector
_movementVector = inputVector;
// Normalize the movement vector so the speed
// will be always the same in all directions
_movementVector.normalize();
// Apply the speed and the delta time for a
// framerate independent movement
_movementVector *= _speed * delta;
} else {
// If no keys are pressed, apply a friction to the vector to make
// the object stop gradually
_movementVector *= _friction;
}
// Apply movement vector to the current position
_position += _movementVector;
}
@override
void render(Canvas canvas) {
super.render(canvas);
final rect = Rect.fromLTWH(_position.x, _position.y, _size, _size);
canvas.drawRect(rect, paint);
}
@override
KeyEventResult onKeyEvent(
RawKeyEvent event,
Set<LogicalKeyboardKey> keysPressed,
) {
if (keysPressed.contains(LogicalKeyboardKey.arrowLeft) &&
event is RawKeyDownEvent) {
_isPressingLeft = true;
} else if (event is RawKeyUpEvent &&
event.data.logicalKey == LogicalKeyboardKey.arrowLeft) {
_isPressingLeft = false;
}
if (keysPressed.contains(LogicalKeyboardKey.arrowRight) &&
event is RawKeyDownEvent) {
_isPressingRight = true;
} else if (event is RawKeyUpEvent &&
event.data.logicalKey == LogicalKeyboardKey.arrowRight) {
_isPressingRight = false;
}
if (keysPressed.contains(LogicalKeyboardKey.arrowUp) &&
event is RawKeyDownEvent) {
_isPressingUp = true;
} else if (event is RawKeyUpEvent &&
event.data.logicalKey == LogicalKeyboardKey.arrowUp) {
_isPressingUp = false;
}
if (keysPressed.contains(LogicalKeyboardKey.arrowDown) &&
event is RawKeyDownEvent) {
_isPressingDown = true;
} else if (event is RawKeyUpEvent &&
event.data.logicalKey == LogicalKeyboardKey.arrowDown) {
_isPressingDown = false;
}
return KeyEventResult.handled;
}
}
スプライトを追加し、プレイヤークラスにロジックを移動する
import 'package:flame/components.dart';
import 'package:flame/game.dart';
import 'package:flame/input.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
// We are going to move all the logic regarding
// the player to this class, the KeyboardHandler
// will allow us to capture keyboard events from within.
// All the previous logic has been moved to this class
// almost without changes.
//
// This time we are going to extend from SpriteComponent,
// which will allow us to add a sprite to this element.
class Player extends SpriteComponent with KeyboardHandler {
static const _size = 128.0;
static const double _speed = 100.0;
static const double _friction = 0.9;
Vector2 _movementVector = Vector2.zero();
bool _isPressingLeft = false;
bool _isPressingRight = false;
bool _isPressingUp = false;
bool _isPressingDown = false;
// The onLoad() function is called at the beginning
// to make an initial load of resources
@override
Future<void> onLoad() async {
await super.onLoad();
size = Vector2(_size, _size);
// Calling Sprite.load() we can asign to this
// component the given image
sprite = await Sprite.load('flutter.png');
}
@override
void update(double delta) {
super.update(delta);
final Vector2 inputVector = Vector2.zero();
if (_isPressingLeft) {
inputVector.x -= 1.0;
} else if (_isPressingRight) {
inputVector.x += 1.0;
}
if (_isPressingUp) {
inputVector.y -= 1.0;
} else if (_isPressingDown) {
inputVector.y += 1.0;
}
if (!inputVector.isZero()) {
_movementVector = inputVector;
_movementVector.normalize();
_movementVector *= _speed * delta;
} else {
_movementVector *= _friction;
}
position += _movementVector;
}
@override
bool onKeyEvent(
RawKeyEvent event,
Set<LogicalKeyboardKey> keysPressed,
) {
if (keysPressed.contains(LogicalKeyboardKey.arrowLeft) &&
event is RawKeyDownEvent) {
_isPressingLeft = true;
} else if (event is RawKeyUpEvent &&
event.data.logicalKey == LogicalKeyboardKey.arrowLeft) {
_isPressingLeft = false;
}
if (keysPressed.contains(LogicalKeyboardKey.arrowRight) &&
event is RawKeyDownEvent) {
_isPressingRight = true;
} else if (event is RawKeyUpEvent &&
event.data.logicalKey == LogicalKeyboardKey.arrowRight) {
_isPressingRight = false;
}
if (keysPressed.contains(LogicalKeyboardKey.arrowUp) &&
event is RawKeyDownEvent) {
_isPressingUp = true;
} else if (event is RawKeyUpEvent &&
event.data.logicalKey == LogicalKeyboardKey.arrowUp) {
_isPressingUp = false;
}
if (keysPressed.contains(LogicalKeyboardKey.arrowDown) &&
event is RawKeyDownEvent) {
_isPressingDown = true;
} else if (event is RawKeyUpEvent &&
event.data.logicalKey == LogicalKeyboardKey.arrowDown) {
_isPressingDown = false;
}
return true;
}
}
class SpriteExample extends FlameGame with HasKeyboardHandlerComponents {
// Declare the player as a variable
late final Player _player;
// Let's modify the background color
@override
Color backgroundColor() => const Color(0xFF353935);
@override
Future<void> onLoad() async {
await super.onLoad();
// Add the player to this game
_player = Player();
await add(_player);
}
}
Reference
この問題について(火炎エンジン、フラッタの上に構築されたゲームエンジン), 我々は、より多くの情報をここで見つけました https://dev.to/svprdga/flame-engine-the-game-engine-built-on-top-of-flutter-6j9テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol