高性能移动HTML5应用开发框架Collie
Sangmin is a Senior JavaScript developer working at NHN and the creator of the JavaScript animation library Collie.
I use collie framework to developed some HTML5 game.
COLLIEJS Framework
CollieJS is a javascript framework.
#Classes
- Animation
- AnimationCycle
- AnimationDelay
- AnimationQueue
- AnimationRepeat
- AnimationTimeline
- AnimationTransition
- Box2d
- Circle
- Component
- ComponentEvent
- DisplayObject
- FPSConsole
- ImageNumber
- Layer
- LayerEvent
- Map
- MovableObject
- PathFinding
- Polyline
- Pool
- Rectangle
- Sensor
- Text
#Namespaces
- collie
- Effect
- ImageManager
- Matrix
- Profiling
- Renderer
- Timer
- Transform
- util
More information visit Api Refence
Sample Code
<div id="container"></div>
<!-- Load a script -->
<script type="text/javascript" src="http://jindo.dev.naver.com/collie/deploy/collie.min.js"></script>
<script type="text/javascript">
// Load the logo.png image
collie.ImageManager.add({
"logo" : "http://jindo.dev.naver.com/collie/img/small/logo.png"
});
// Create a layer
var layer = new collie.Layer({
width : 240,
height : 240
});
// Create an object that will be displayed on the screen
var item = new collie.DisplayObject({
x : "center",
y : "center",
velocityRotate : 180,
backgroundImage : "logo" // The background image is re-sized to the pre-loaded logo.png size
}).addTo(layer); // Add to a layer
// Add a layer to renderer
collie.Renderer.addLayer(layer);
// Retrieve renderer from the container ID element
collie.Renderer.load(document.getElementById("container"));
// Start rendering
collie.Renderer.start();
</script>
##Basic Usages
1.Make your layer for contain objects.
collie.Layer
var layer = new collie.Layer();
2.Make Object for display on layer.
collie.DisplayObject
Use MovableObject if you want to use velocity or force attributes.
collie.MovableObject
Other objects extends collie.DisplayObject
collie.Text
collie.Circle
collie.Polyline
collie.Rectangle
Make sure that you should be append object to layer after make object.
new collie.DisplayObject().addTo(layer);
3.You can load image for make stylish animation..
collie.ImageManager
collie.ImageManager.add({
sample : "image.png",
sample2 : "image2.png"
});
4.If you want to animate objects, you can use collie.Timer
collie.Timer
collie.Timer is just initializer. you can find more detail description here.
- collie.Timer.repeat()
- collie.Timer.delay()
- collie.Timer.cycle()
- collie.Timer.transition()
- collie.Timer.queue()
-
collie.Timer.timeline()
collie.Timer.cycle(oDisplayObject, 1000, { to : 10, loop : 3 });
5.You can use event if you want to run callback when occurs user action.
collie.DisplayObject
collie.Layer
new collie.DisplayObject().attach({
click : function (e) {
console.log(e.x, e.y);
}
});
6.Renderer can help for start animation if you are ready to run.
collie.Renderer
collie.Renderer.addLayer(layer);
collie.Renderer.load(document.getElementById("container"));
collie.Renderer.start();