참고: 설정을 저장한 후에 바뀐 점을 확인하기 위해서는 브라우저의 캐시를 새로 고쳐야 합니다. 구글 크롬, 파이어폭스, 마이크로소프트 엣지, 사파리: ⇧ Shift 키를 누른 채 "새로 고침" 버튼을 클릭하십시오. 더 자세한 정보를 보려면 위키백과:캐시 무시하기 항목을 참고하십시오.

    collie.ImageManager.addImages({
        "bird_walk" : "http://jindo.dev.naver.com/collie/img/small/bird_walk.png",
        "bird_jump" : "http://jindo.dev.naver.com/collie/img/small/bird_jump.png",
        "ground" : "http://jindo.dev.naver.com/collie/img/small/ground.png",
	 "sky" : "http://jindo.dev.naver.com/collie/img/small/sky.png"
    });
     
    var layer = new collie.Layer({
        width : 300,
        height : 300
    }).attach({
        click : function () {
            if (!oTimerJump.isPlaying()) {
                oTimer.stop();
                oTimerJump.start();
            }
        }
    });
 
    var oBackground = new collie.DisplayObject({
        x : 0,
        y : 0,
        width : 300,
        height : 300,
        backgroundRepeat : "repeat", // Repeat X-Axis
        backgroundImage : "sky"
    }).addTo(layer);

    var oGround = new collie.DisplayObject({
        x : 0,
        y : "bottom",
        width : 320 * 2, // Using Double width for continuously horizontal move.
        height : 88,
        velocityX : -80,
        backgroundRepeat : "repeat-x", // Repeat X-Axis
        rangeX : [-320, 0], // This object can move from first position to second position.
        positionRepeat : true, // This object move the other side when It's on one end of the edge.
        backgroundImage : "ground"
    }).addTo(layer);
     
    var oAvatar = new collie.DisplayObject({
        x : 50,
        y : 80,
        width : 70,
        height : 150
    }).addTo(layer);
     
    var oAvatarWalk = new collie.DisplayObject({
        x : 0,
        y : 0,
        width : 70,
        height : 150,
        backgroundImage : "bird_walk"
    }).addTo(oAvatar);
     
    var oAvatarJump = new collie.DisplayObject({
        width : 70,
        height : 150,
        spriteLength : 17,
        backgroundImage : "bird_jump",
        visible : false
    }).addTo(oAvatar);
     
    var oTimer = collie.Timer.cycle(oAvatarWalk, "20fps", {
        to : 9,
        loop : 0,
        onStart : function () {
            oAvatarWalk.set("visible", true);
            oAvatarJump.set("visible", false);
        }
    });
     
    var oTimerJump = collie.Timer.cycle(oAvatarJump, "17fps", {
        from : 0,
        to : 16,
        loop : 1,
        useAutoStart : false,
        onStart : function () {
            oAvatarWalk.set("visible", false);
            oAvatarJump.set("visible", true);
        },
        onComplete : function () {
            oTimer.start();
        }
    });

  

    collie.Renderer.addLayer(layer);
    collie.Renderer.load(document.getElementById("container"));
    collie.Renderer.start();