qiciengine/qiciengine

A free JavaScript game engine library with a web-based comprehensive suite of toolset for making HTML5 games. http://www.qiciengine.com

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!

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.

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:

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.

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-examples
• QICI Engine Cookbook: https://github.com/qiciengine/qiciengine-cookbook
• Lightweight Game Server: https://github.com/qiciengine/qiciengine-server

Everybody is welcomed to report issues or pull requests for all the GitHub repositories mentioned above.

Changelog

Details changes for each release are documented in the release notes. We recommend you use the latest version of QICI Engine.

Stay In Touch

If you have questions with using QICI Engine please visit our Ask forum, We will answer your questions ASAP.

If you use Slack and would like to join the QICI Engine channel then please [drop us an email](mailto:[email protected]?subject=Slack Invite&body=Please invite me to the QICI Engine slack channel.%0A%0AMy%20email%20address%20is%3A%20___%0AMy%20first%20name%20is%3A%20___%0AMy%20last%20name%20is%3A%20___). All we need is your email address, first name and last name and then we can send you an invite to the channel.

If you want to keep up to date with the latest QICI Engine news then just follow us on Twitter and we will keep you posted!

For more Information, please visit our official QICI Engine webstie or Chinese website.

If you have any questions or if there is something we didn’t cover, please feel free to contact me at email or Twitter.

License

QICI Engine is released under the MIT License.

qiciengine's Issues

Anyone stil using this?

API GameObject Sprite Link not working

From http://docs-cdn.qiciengine.com/api/gameobject/index.html if you click sprite the site 404.

TypeScript errors on publish

Although it works just fine in the editor, the transpiled TypeScript code causes the following error when published from the editor:

Uncaught TypeError: Cannot read property 'prototype' of undefined

You can see the error in action in the QICI TypeScript demo at http://engine.qiciengine.com/demo/TypeScript/RotateImage/index.html

It appears that on publish, the wrapping code in "/editorservice/Template/ScriptPackTemplate.js" causes the transpiled TypeScript code to break.

Ideally, the editor's "Projects.js" daemon should probably not wrap the "ts.js" transpiled code as it does other user-defined scripts.

To allow my TypeScript projects to publish without errors, I commented out the wrapper in "/editorservice/Template/ScriptPackTemplate.js":

`// (function(window, Object, undefined) {

{{body}}

// }).call(this, this, Object);`

Dragging tilemap bin file not highlighting data input.

Hi,

Firstly, thanks for releasing this project!

I'm struggling to get tilemaps to work. I followed the instruction on http://docs.qiciengine.com/manual/Sample/Tilemap.html.

After I added my *.txt and *.png, it creates the *.bin file. I then try to drag this to the Inspector, Tilemap, Data field. But the input box never turns yellow as in the video.

I'm using qici 1.0.6 and Chrome 47.0.2526.111 (64-bit) on os x. I tried it on my windows machine and encountered the same issue.

Attached is my files I'm testing with.

Untitled.txt

Restart

The play button stops the game. I'm in search of a restart button.

Because at the moment I play my game.
Make changes to the code in the interactive mode,
save the code and stop the game.
To only after it loaded into edit mode do I press play.
Which loads it into play mode again.

The loading times between play edit play takes time, and I wonder if a restart button will not make the round trip time a bit shorter?

Home page down

http://www.qiciengine.com/ is down! Projects also seems very still. How are things going?

文档在哪里还可以看

之前保存的文档地址都无法访问了

In DragonBones animation, symbols that contain multiple frames don't rotate

This issue applies to animations created in Flash, exported with DragonBones, and imported into QICI.

The problem is when the Flash animation includes an animated symbol (a symbol that contains multiple frames). This symbol works correctly in the DragonBones preview, but when imported to QICI, it doesn't rotate when it's supposed to as part of the animation.

Scaling and translating that symbol works fine - the only problem is rotating it. Additionally, simple symbols (with only one frame) can be rotated normally.

I've attached a simple example - the Flash file, the DragonBones export, and the QICI project.

bug_test_fla.zip
bug_test.zip
bug_test_project.zip

Unable to create project with Ubuntu

I can't create a new project in Chrome running on Ubuntu 15.04. My version is qiciengine-1.0.3.
Should Linux work or is it currently not supported?

In case it helps here is the log:

Please enter this url in browser:

http://127.0.0.1:5002/Project.html

New connection.
-----> QUERY_SETTINGS
-----> GET_PLATFORM
-----> GET_USER_HOME_DIR
-----> RECENT_OPEN
-----> GET_USER_HOME_DIR
-----> CHECK_FOR_UPDATES
-----> RECENT_OPEN
New connection.
-----> LIST_DIR
cmd：LIST_DIR，exception：Error: ENOENT, no such file or directory '/Volumes'
Error: ENOENT, no such file or directory '/Volumes'
at Object.fs.readdirSync (evalmachine.:659:18)
at listDir (/home/pablo/Documents/gameprojects/qiciengine-1.0.3/editorservice/cmd/LIST_DIR.js:39:12)
at Object.M.COMMAND.registerCmd.main (/home/pablo/Documents/gameprojects/qiciengine-1.0.3/editorservice/cmd/LIST_DIR.js:87:16)
at clazz.dispatch (/home/pablo/Documents/gameprojects/qiciengine-1.0.3/editorservice/socket/Command.js:121:33)
at Socket. (/home/pablo/Documents/gameprojects/qiciengine-1.0.3/editorservice/socket/Command.js:97:14)
at Socket.EventEmitter.emit (events.js:98:17)
at Socket.onevent (/home/pablo/Documents/gameprojects/qiciengine-1.0.3/node_modules/socket.io/lib/socket.js:330:8)
at Socket.onpacket (/home/pablo/Documents/gameprojects/qiciengine-1.0.3/node_modules/socket.io/lib/socket.js:290:12)
at Client.ondecoded (/home/pablo/Documents/gameprojects/qiciengine-1.0.3/node_modules/socket.io/lib/client.js:193:14)
at Decoder.Emitter.emit (/home/pablo/Documents/gameprojects/qiciengine-1.0.3/node_modules/component-emitter/index.js:134:20)
-----> LIST_DIR
-----> LIST_DIR
-----> LIST_DIR
-----> CREATE_PROJECT
cmd：CREATE_PROJECT，exception：TypeError: Object # has no method 'isAbsolute'
TypeError: Object # has no method 'isAbsolute'
at clazz.createProject (/home/pablo/Documents/gameprojects/qiciengine-1.0.3/editorservice/module/Project.js:32:15)
at Object.M.COMMAND.registerCmd.main (/home/pablo/Documents/gameprojects/qiciengine-1.0.3/editorservice/cmd/CREATE_PROJECT.js:10:29)
at clazz.dispatch (/home/pablo/Documents/gameprojects/qiciengine-1.0.3/editorservice/socket/Command.js:121:33)
at Socket. (/home/pablo/Documents/gameprojects/qiciengine-1.0.3/editorservice/socket/Command.js:97:14)
at Socket.EventEmitter.emit (events.js:98:17)
at Socket.onevent (/home/pablo/Documents/gameprojects/qiciengine-1.0.3/node_modules/socket.io/lib/socket.js:330:8)
at Socket.onpacket (/home/pablo/Documents/gameprojects/qiciengine-1.0.3/node_modules/socket.io/lib/socket.js:290:12)
at Client.ondecoded (/home/pablo/Documents/gameprojects/qiciengine-1.0.3/node_modules/socket.io/lib/client.js:193:14)
at Decoder.Emitter.emit (/home/pablo/Documents/gameprojects/qiciengine-1.0.3/node_modules/component-emitter/index.js:134:20)
at Decoder.add (/home/pablo/Documents/gameprojects/qiciengine-1.0.3/node_modules/socket.io-parser/index.js:247:12)

qc.Keyboard.keyCount == 1 always

Hello

i want show dialog on keypress, dialog flickering with keypress always

qici havent method isKeyUp
method isKeyDown calling all time while key is pressed
qc.Keyboard.keyCount == 1 always (i mean it is bug, counter must increments while event is active)

i cant see there way to get one call the callback on keypress event

Typescript scripting

Could you please add Typescript scripting with editor or with Visual Studio 2015 or 2013 or just add typedef file.

bug in demo "AsteroidsMovement"

bullets moves and ship orientation has different angle with code
bullet.rotation = self.gameObject.rotation;

Actual source in Git?

I'm glad to see this released here, but we really should have the source fully available on here. Would you like some help in getting this structured properly so that we can collaborate and use GitHub to its full potential?

Drawing Sprites from Tiled Objects?

Hi,

I'm trying to create sprites out of my objects.

TileObjectCreator.prototype.awake = function() {
    var self = this;
    console.log('this', this, 'arguments', arguments);

    console.log( 'layers', this.tilemap ? this.tilemap.layers : undefined); 
    if (self.tilemap) {
        // just for debugging
        window.layers = [];
        window.objs = [];
        // loop layers and seachh for ObjectLayer
        self.tilemap.layers.forEach(function(layer, index, array) {
            if (layer instanceof qc.ObjectLayer) {
                var tiledLayer = self.tilemap._getLayerJson(index, 'objectgroup');
                window.layers.push(layer);
                tiledLayer.objects.forEach(function(obj, index, array) {  
                    window.objs.push(obj);
                    /*
self.game.assets.load('hall', 'Assets/texture/bbg_cave_hall.bin', function(asset) {
        // 创建精灵对象
        var sprite = self.game.add.sprite();
        sprite.texture = asset;
        sprite.resetNativeSize();
    });
*/
                });
            } 
        });
    }

So previously using phaser I would have

_.each(layer, function(object) {
            // So tiled objects can use a key as in a key name you loaded with phaser.load into the cache
            var key;
            if (object.properties.key) {
                key = object.properties.key;
            } else {
                key = 'gid-' + object.gid;
                // here we forge bitmaps from the `tileset[0]` using the gid assigned by [Tiled]
                var bitmap = this.game.add.bitmapData(32, 32, key, true);
                // and how do we know there will only be one tileset
                this.tilesets[0].draw(bitmap.context, 0, 0, object.gid);
                //var bitmap = this.game.add.BitmapData(32, 32, 'gid-' + object.gid, true);
                key = bitmap;
            }

So I found tilemap.tilesets[0] and see it is a qc.Atlas but I want to use the gid to get the frame from the atlas, to use with my sprite.

I'm sure there must be a easier way?

Name

Hey I was thinking it might be a good idea to call this "Celadon" or "Celadon Engine" in English. I've run this name "QICI" by a few people and have gotten really strange looks from them. Some people even thought I was saying something "dirty" (off color; sexual). No one really knows how to pronounce "QICI" in English since it is missing traditional demarquations.

At any rate, I think just sticking to "Celedon Engine" would be much more appealing. Hope this helps!

UIImage and Sprite display as different sizes even though their widths, heights and scales match exactly.

UIImage and Sprite display as different sizes even though their widths, heights and scales match exactly. I added the UIImages by dragging from my assets panel into the game screen. I added my sprites by adding a sprite through the menus then setting their texture as the same images I had dragged in before. Their (the sprites and uiimages) widths and heights match the image (source image) width and height and their scales are set to 1. Is this a feature that I am missing or a bug? See attached image.

node.getScript can't find reference when game is published

I have a behavior script creating a prefab. When the prefab loads I'm getting the prefabs attached script using the getScript method [ex. myPrefab.getScript("scriptName")]. This works great in the editor. The problem happens when I publish the game. I get an error saying that it can't find the reference to "scriptName".

I have a temporary solution where I'm just using myNode.scripts[0].

Not work for node 8.1.3

Error: Cannot find module 'internal/fs' at Function.Module._resolveFilename (module.js:485:15) at Function.Module._load (module.js:437:25) at Module.require (module.js:513:17) at require (internal/module.js:11:18) at evalmachine.<anonymous>:40:20 at Object.<anonymous> (D:\Projects\QICI_Engine_1.1.4\node_modules\fs-extra\node_modules\graceful-fs\fs.js:11:1) at Module._compile (module.js:569:30) at Object.Module._extensions..js (module.js:580:10) at Module.load (module.js:503:32) at tryModuleLoad (module.js:466:12)

Z-index bug of QICI update

I got yesterday an QICI editor update request when opening it. When I pressed OK, the design went to hell :). Playing around a bit with CSS, I realized that the update (and success) dialog was behind other elements because of smaller z-index. Editor was windows 7 64 bit Chrome (newest stable version).

Phaser.game.input.pointerOver() missing

It looks like the pointerOver() method has been removed from the Phaser library portion of the editor. The only other option is using the onEnter and onExit methods. I need to run an event that doesn't meet the onEnter and onExit criteria. I need to check if a pointer event happens outside of my node. Also, onEnter and onExit are only specific to users without a mouse and don't work with touch events.

Is this something that can be added in the next release?

probably bug with script renaming

I rename script then try add it to node... File inspector has new name, component inspector has old name. Reload project, close/open page and load project dont helped.

create project failed

tested with qiciengine-1.1.3.

-----> LIST_DIR
-----> LIST_DIR
-----> LIST_DIR
-----> LIST_DIR
-----> LIST_DIR
-----> CREATE_PROJECT
cmd：CREATE_PROJECT，exception：[TypeError: Object #<Object> has no method 'isAbsolute']
TypeError: Object #<Object> has no method 'isAbsolute'
    at Object.createProject (/Users/jryin/workspace/qiciengine/releases/editorservice/daemons/Project.js:112:15)
    at Object.COMMAND_D.registerCmd.main (/Users/jryin/workspace/qiciengine/releases/editorservice/cmd/CREATE_PROJECT.js:10:29)
    at dispatch (/Users/jryin/workspace/qiciengine/releases/editorservice/daemons/socket/Command.js:109:33)
    at Socket.<anonymous> (/Users/jryin/workspace/qiciengine/releases/editorservice/daemons/socket/Command.js:28:9)
    at Socket.emit (events.js:98:17)
    at Socket.onevent (/Users/jryin/workspace/qiciengine/releases/node_modules/socket.io/lib/socket.js:335:8)
    at Socket.onpacket (/Users/jryin/workspace/qiciengine/releases/node_modules/socket.io/lib/socket.js:295:12)
    at Client.ondecoded (/Users/jryin/workspace/qiciengine/releases/node_modules/socket.io/lib/client.js:193:14)
    at Decoder.Emitter.emit (/Users/jryin/workspace/qiciengine/releases/node_modules/component-emitter/index.js:134:20)
    at Decoder.add (/Users/jryin/workspace/qiciengine/releases/node_modules/socket.io-parser/index.js:247:12)

QICI Editor and Widgets source?

This project includes releases but not the full source. I see core (runtime) source over at https://github.com/qiciengine/qiciengine-core but nowhere can I find the source to the editor, widgets, or the editor service. Are they not on GitHub?