<p align="center"><a href="http://www.qiciengine.com" target="_blank"><img src="images/logo.png"></a></p>

QICI Engine (青瓷引擎中文)

• Introduction
• Technology Stack
• Features
• Getting Started
• Documentation
• Examples
• Opening Issues
• Contributing
• Changelog
• Stay In Touch
• License

Introduction

QICI Engine is a free and open source JavaScript game engine library with a web-based comprehensive suite of toolset for making HTML5 games.

With QICI Engine, creating HTML5 Games just like Web Development, use your favorite code editor, use your favorite web browser, leverage JavaScript language and all the best web development tools. QICI Engine takes care of the complexity of the underlying technologies, so you just focus on what's important - making your game!

<img width='400' src="images/overview.png">

Technology Stack

QICI Engine is based on the free and open source HTML5 game framework Phaser, which uses Pixi.js for WebGL and Canvas rendering across desktop and mobile web browsers.

Phaser is actively developed and maintained by @photonstorm, but QICI Engine uses the specific version Phaser 2.3.0. We keep track of bug fixes and performance improvements for Phaser, so you can use the customized Phaser version that QICI Engine provides safely.

QICI Engine is made up of three parts: QICI Core, QICI Widget and QICI Editor:

• QICI Core: A JavaScript Game Engine library that is based on Phaser.
• QICI Widget: A JavaScript UI library for creating rich application.
• QICI Editor: A web-based editor with a Node.js server for accelerating HTML5 game development.

The QICI Core is the core of QICI Engine, the QICI Editor would not work without it, but the QICI Core can function on its own to be used to make a HTML5 Game by writing code without QICI Editor. But for complex UI, it’s really hard to build and maintain without the help of WYSIWYG visual interface, with QICI Editor even artists and designers can help to build the game’s UI.

QICI Widget provides the HTML5 UI widgets for making the GUI in QICI Editor.

QICI Core is a JavaScript Game library, QICI Widget is a JavaScript UI library, and QICI Editor uses Node.js for accessing the file system, so QICI Engine is a Full-Stack JavaScript Game Engine.

<img width='400' src="images/techstack.png">

Features

• QICI Core
  • WebGL and Canvas rendering support
  • UI Components: Toggle, Slider, ProgressBar, ScrollView, List, Table, etc.
  • Rect Transform UI Layout
  • DragonBones skeleton animation data format support
  • NinePatch image
  • NodeMask and Filter effect
  • Mixing Dom and Canvas
  • Web fonts and Bitmap fonts
  • JSON Tiled map editor file support
  • Web Audio and Audio Tag
  • Tween animation
  • Behavioural oriented architecture
  • Asset Management
  • Serialization with scene and prefab
  • Mouse, Keyboard and Touch support
  • Import data from Excel
  • Plugin system with official plugins like Arcade Physics and Lock Orientation
• QICI Editor
  • Project Management
  • Scene Management
  • Hierarchy panel, Scene panel and Inspector panel
  • Texture atlases
  • Frame Animation
  • Editing tween curve
  • Editing NinePatch
  • Import and preview skeleton animation
  • Extending Editor
  • Project settings
  • Publishing Project

You can even run QICI Editor in your mobile device browsers:
<img width='400' src="images/iphone.jpg"><br><img width='400' src="images/dota.png"><br><img width='400' src="images/ipad.jpg">

Getting Started

• Follow the Installation Guide to install Node.js and the latest QICI Editor.
• Read the Project Management Guide to create a new project.
• Read the Scene Editing Guide to create a new scene.
• Read the UI and Components Guide to add some components on the scene.
• Press the "Run" button from the Toolbar or select the "Edit/Preview(WebGL)" item from the Main Menu to play and test the game.

Documentation

The website’s documentation is divided into multiple sections.

• There are Guides that discuss topics like Using Editor, UI and Components, Official Plugins and Extending Editor.
• The API Documentation for QICI Core
• The Demo Guides teaching you to build the demo step by step.
  • To be continued...

Examples

A wide range of source code examples for you to explore. Download all in one zip file.

<a href="http://engine.qiciengine.com/demo/Project/dota/index.html" target="_blank"><img width='200' src="images/example1.png"></a> <a href="http://engine.qiciengine.com/demo/Project/tower/index.html" target="_blank"><img width='200' src="images/example2.png"></a> <a href="http://engine.qiciengine.com/demo/Project/sources/index.html" target="_blank"><img width='200' src="images/example3.png"></a> <a href="http://engine.qiciengine.com/demo/misc/performance/index.html" target="_blank"><img width='200' src="images/example4.png"></a> <a href="http://engine.qiciengine.com/demo/misc/widgets/index.html" target="_blank"><img width='200' src="images/example5.png"></a> <a href="http://engine.qiciengine.com/demo/Layout/slime/index.html" target="_blank"><img width='200' src="images/example6.png"></a> <a href="http://engine.qiciengine.com/demo/Layout/tablelayout/index.html" target="_blank"><img width='200' src="images/example7.png"></a> <a href="http://engine.qiciengine.com/demo/Tilemap/tilemap_Mario/index.html" target="_blank"><img width='200' src="images/example8.png"></a> <a href="http://engine.qiciengine.com/demo/Layout/qq/index.html" target="_blank"><img width='200' src="images/example9.png"></a> <a href="http://engine.qiciengine.com/demo/Layout/anchors/index.html" target="_blank"><img width='200' src="images/example10.png"></a> <a href="http://engine.qiciengine.com/demo/ProgressBar/progressBar_mixed/index.html" target="_blank"><img width='200' src="images/example11.png"></a> <a href="http://engine.qiciengine.com/demo/UIText/text/index.html" target="_blank"><img width='200' src="images/example12.png"></a>

Opening Issues

If you encounter a bug with QICI Engine we would like to hear about it. Search the existing issues and try to make sure your problem doesn’t already exist before opening a new issue. It’s helpful if you include the version of QICI Engine and browser you’re using. Please include a stack trace and reduced repro case when appropriate, too.

QICI Engine issues are intended for bug reports and feature requests. For help and questions with using QICI Engine please make use of our Ask forum. If you want to hang out and chat about game dev in general, please join our slack channel in Stay In Touch section.

Contributing

• QICI Engine Core: https://github.com/qiciengine/qiciengine-core
• QICI Engine Documentation: https://github.com/qiciengine/qiciengine-documentation
• QICI Engine Examples: [https://github.com/qiciengine/qiciengine-exampl