All Projects → flutterkit → Zerker

flutterkit / Zerker

Licence: mit
Zerker is a lightweight and powerful flutter graphic animation library

Programming Languages

dart
5743 projects

Projects that are alternatives of or similar to Zerker

Canvas
Canvas is a Go drawing library based on OpenGL or using software rendering that is very similar to the HTML5 canvas API
Stars: ✭ 358 (-17.7%)
Mutual labels:  canvas
Rustynes
👾 An NES emulator by Rust and WebAssembly
Stars: ✭ 399 (-8.28%)
Mutual labels:  canvas
Ipycanvas
Interactive Canvas in Jupyter
Stars: ✭ 416 (-4.37%)
Mutual labels:  canvas
Troika
A JavaScript framework for interactive 3D and 2D visualizations
Stars: ✭ 342 (-21.38%)
Mutual labels:  canvas
Duckhunt Js
DuckHunt ported to JS and HTML5
Stars: ✭ 390 (-10.34%)
Mutual labels:  canvas
Tui.image Editor
🍞🎨 Full-featured photo image editor using canvas. It is really easy, and it comes with great filters.
Stars: ✭ 4,761 (+994.48%)
Mutual labels:  canvas
Shader Doodle
A friendly web-component for writing and rendering shaders.
Stars: ✭ 356 (-18.16%)
Mutual labels:  canvas
Indoor3d
a js lib based on three.js to show 3D indoor map
Stars: ✭ 425 (-2.3%)
Mutual labels:  canvas
React Konva
React + Canvas = Love. JavaScript library for drawing complex canvas graphics using React.
Stars: ✭ 4,302 (+888.97%)
Mutual labels:  canvas
Pixelcraft
A Pixel Art Editor
Stars: ✭ 413 (-5.06%)
Mutual labels:  canvas
React Avatar
👤 Load, crop & preview avatar with React
Stars: ✭ 361 (-17.01%)
Mutual labels:  canvas
Game
⚔️ An online JavaScript 2D Medieval RPG.
Stars: ✭ 388 (-10.8%)
Mutual labels:  canvas
Planck.js
2D JavaScript Physics Engine
Stars: ✭ 4,149 (+853.79%)
Mutual labels:  canvas
Openscope
openScope Air Traffic Control Simulator
Stars: ✭ 358 (-17.7%)
Mutual labels:  canvas
Cheetah Grid
The fastest open-source data table for web.
Stars: ✭ 417 (-4.14%)
Mutual labels:  canvas
React Canvas
A pluggable layout and graphics system aimed at powering desktop publishing as well as storm-react-diagrams
Stars: ✭ 357 (-17.93%)
Mutual labels:  canvas
Jsnes Web
A browser UI for JSNES, a JavaScript NES emulator
Stars: ✭ 398 (-8.51%)
Mutual labels:  canvas
Lena.js
👩 Library for image processing
Stars: ✭ 432 (-0.69%)
Mutual labels:  canvas
Pts
A library for visualization and creative-coding
Stars: ✭ 4,628 (+963.91%)
Mutual labels:  canvas
React Canvas Draw
React Component for drawing in canvas
Stars: ✭ 412 (-5.29%)
Mutual labels:  canvas

pub package Made-with-Flutter Made-with-Dart

What is Zerker

Zerker is a flexible and lightweight flutter canvas graphic animation library.

With Zerker, you can create a lot of seemingly cumbersome animation effects, such as animated animations, pop-up animations, scene transitions, icon effects, and more.

At the same time, you can create a lot of simple games with Zerker. Zerker contains elements such as sprites, scrolling backgrounds, and atlases, making it easy to create game worlds with them.

➤ More detailed documentation about Zerker is here https://flutterkit.github.io/zerkerdocs/

An image

Installation

Add this to your package's pubspec.yaml file, And execute the commandflutter pub get:

dependencies:
  zerker: <latest_version_here>
More detailed installation steps, you can refer to here. https://pub.dev/packages/zerker#-installing-tab-

Getting started

Import the package

import 'package:zerker/zerker.dart';

Useage

Create a zerker widget

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Center(
          child: Zerker(app: MyZKApp(), clip: true, interactive: true, width: 350, height: 350),
        ));
  }
}

Create your Zerker class inherited from ZKApp

class MyZKApp extends ZKApp {

  @override
  init() {
    super.init();
    /// init zerker scene
  }

  @override
  update(int time) {
    super.update(time);
    sprite.position.x++;
  }
}

Initialize the scene and create elements in the init function

/// Create a zerker sprite
ZKSprite bigboy = ZKSprite(key: "bigboy")
  ..animator.make("front", [0, 1, 2, 3, 4])
  ..animator.make("left", ['5-9'])
  ..animator.make("after", ['10-14'])
  ..animator.make("right", ['15-19'])
  ..onTapDown = (event) {
    bigboy.animator.play("right", 8, true);
  };
stage.addChild(bigboy);

/// Create a zerker text
ZKText text = ZKText()
  ..setPosition(100, 100)
  ..text = "hello world"
  ..setStyle(color: Colors.blueGrey, backgroundColor: Colors.red[50]);
stage.addChild(_text);

More cases

You can quickly start learning an example here. https://flutterkit.github.io/zerkerdocs/guide/tutorial.html

More zerker examples you can view here https://github.com/flutterkit/zerker-samples. If you have any questions about Zerker, please let me know by email, thank you very much!

img img img

License

Zerker is licensed under MIT license. View license. https://github.com/flutterkit/zerker/blob/master/LICENSE

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].