Toggle navigation
Sign Up
Log In
Explore
Works
Folders
Tools
Collections
Artists
Groups
Groups
Topics
Tasks
Tasks
Jobs
Teams
Jobs
Recommendation
More Effects...
JS
$(window).load(function () { init(); }); function init() { createJSInit(); } var canvas; var stage; var texture; var textureData; var skeletonData; function createJSInit() { canvas = document.getElementById("canvas"); stage = new createjs.Stage(canvas); texture = new Image(); texture.onload = function() { $.getJSON( "http://www.effecthub.com/uploads/codefile/6E746C6D-1745-A319-061D-40A293BFE685/texture.json", function(data) { textureData = data; $.getJSON( "http://www.effecthub.com/uploads/codefile/B49EF373-B963-AA56-A476-E5E6CE3F2CEF/skeleton.json?r=" + Math.random(), function(data) { skeletonData = data; dragonBonesInit(); } ) } ); } texture.src = "http://dragonbones.github.io/demo/assets/knight/texture.png"; } var factory; var armature; function dragonBonesInit() { factory = new dragonBones.factorys.CreateJSFactory(); factory.addSkeletonData(dragonBones.objects.DataParser.parseSkeletonData(skeletonData)); factory.addTextureAtlas(new dragonBones.textures.CreateJSTextureAtlas(texture, textureData)); armature = factory.buildArmature("knight"); armature.getDisplay().x = 195; armature.getDisplay().y = 195; updateAnimation(); dragonBones.animation.WorldClock.clock.add(armature); stage.addChild(armature.getDisplay()); createjs.Ticker.setFPS(60); createjs.Ticker.addEventListener("tick", update); document.onkeydown = keyHandler; document.onkeyup = keyHandler; canvas.onclick = attack; _arm = armature.getSlot("armOutside"); _arm.getChildArmature().addEventListener(dragonBones.events.AnimationEvent.FADE_IN, armAnimationHandler); _arm.getChildArmature().addEventListener(dragonBones.events.AnimationEvent.COMPLETE, armAnimationHandler); _arm.getChildArmature().addEventListener(dragonBones.events.FrameEvent.ANIMATION_FRAME_EVENT, armFrameEventHandler); } function update() { updateSpeed(); dragonBones.animation.WorldClock.clock.advanceTime(1/60); stage.update(); updateArrows(); } var _arm; var _left; var _right; function keyHandler(e) { e = e || window.event; var currKey = e.keyCode || e.which || e.charCode; var isDown = e.type == "keydown"; switch (currKey) { case 37 : case 65 : _left = isDown; updateMove(-1); break; case 39 : case 68 : _right = isDown; updateMove(1); break; case 38 : case 87 : if (isDown) { jump(); } break; case 32 : if (isDown) { upgradeWeapon(); } break; case 83 : case 40 : if (isDown) { changeWeapon(); } break; } } function updateMove(dir) { if (_left && _right) { move(dir); } else if (_left) { move(-1); } else if (_right) { move(1); } else { move(0); } } var _speedX = 0; var _speedY = 0; var _moveDir = 0; var _face = 0; var _isJumping; function move(dir) { if (_moveDir == dir) { return; } _moveDir = dir; updateAnimation(); } function jump() { if (_isJumping) { return; } _speedY = -16; _isJumping = true; armature.animation.gotoAndPlay("jump"); } function updateAnimation() { if (_isJumping) { return; } if (_moveDir == 0) { _speedX = 0; armature.animation.gotoAndPlay("stand"); } else { _speedX = _moveDir * 6; armature.animation.gotoAndPlay("run"); armature.getDisplay().scaleX = _moveDir; } } function updateSpeed() { if (_isJumping) { var speed = 1; if(_speedY <= 0 && _speedY + speed > 0) { armature.animation.gotoAndPlay("fall"); } _speedY += speed; } if (_speedX != 0) { armature.getDisplay().x += _speedX; if (armature.getDisplay().x < 70) { armature.getDisplay().x = 70; } else if (armature.getDisplay().x > 320) { armature.getDisplay().x = 320; } } if (_speedY != 0) { armature.getDisplay().rotation = _speedY * 0.8 * armature.getDisplay().scaleX; armature.getDisplay().y += _speedY; if (armature.getDisplay().y > 195) { armature.getDisplay().y = 195; _isJumping = false; _speedY = 0; _speedX = 0; armature.getDisplay().rotation = 0; updateAnimation(); } } } var SWORD = "sword"; var PIKE = "pike"; var AXE = "axe"; var BOW = "bow"; var WEAPON_NAMES = [SWORD, PIKE, AXE, BOW]; var _weaponID = 0; function changeWeapon() { _weaponID ++; if (_weaponID >= 4) { _weaponID -= 4; } var weaponName = WEAPON_NAMES[_weaponID]; var animationName = "ready_" + weaponName; _arm.getChildArmature().animation.gotoAndPlay(animationName); } var _weaponLevels = [0, 0, 0, 0]; function upgradeWeapon() { var weaponLevel = _weaponLevels[_weaponID]; weaponLevel ++; if (weaponLevel >= 3) { weaponLevel -= 3; } _weaponLevels[_weaponID] = weaponLevel; var weaponName = WEAPON_NAMES[_weaponID]; switch(weaponName) { case SWORD: case PIKE: case AXE: var weapon = _arm.getChildArmature().getSlot("weapon"); weapon.setDisplay(factory.getTextureDisplay("knightFolder/" + weaponName + "_" + (weaponLevel + 1))); break; case BOW: var bow = _arm.getChildArmature().getSlot("bow"); var bowBA = bow.getChildArmature().getSlot("ba"); var bowBB = bow.getChildArmature().getSlot("bb"); var bowArrow = bow.getChildArmature().getSlot("arrow"); var bowArrowB = bow.getChildArmature().getSlot("arrowBackup"); bowBA.setDisplay(factory.getTextureDisplay("knightFolder/" + weaponName + "_" + (weaponLevel + 1))); bowBB.setDisplay(factory.getTextureDisplay("knightFolder/" + weaponName + "_" + (weaponLevel + 1))); bowArrow.setDisplay(factory.getTextureDisplay("knightFolder/arrow_" + (weaponLevel + 1))); bowArrowB.setDisplay(factory.getTextureDisplay("knightFolder/arrow_" + (weaponLevel + 1))); break; } } var _isAttacking; var _isComboAttack; var _hitCount = 1; function attack() { if (_isAttacking) { return; } _isAttacking = true; var weaponName = WEAPON_NAMES[_weaponID]; var animationName = "attack_" + weaponName + "_" + _hitCount; _arm.getChildArmature().animation.gotoAndPlay(animationName); } function armAnimationHandler(e) { switch(e.type) { case dragonBones.events.AnimationEvent.FADE_IN: _isComboAttack = false; break; case dragonBones.events.AnimationEvent.COMPLETE: if(_isComboAttack) { var weaponName = WEAPON_NAMES[_weaponID]; var animationName = "ready_" + weaponName; _arm.getChildArmature().animation.gotoAndPlay(animationName); } else { _isAttacking = false; _hitCount = 1; _isComboAttack = false; } break; } } function armFrameEventHandler(e) { switch(e.frameLabel) { case "fire": var bow = _arm.getChildArmature().getSlot("bow"); var resultPoint = bow.getDisplay().localToGlobal(0, 0); if (armature.getDisplay().scaleX > 0) { var r = armature.getDisplay().rotation / 180 * Math.PI + bow.global.getRotation(); } else { r = armature.getDisplay().rotation / 180 * Math.PI - bow.global.getRotation() + Math.PI; } switch(_weaponLevels[_weaponID]) { case 0: createArrow(r, resultPoint); break; case 1: createArrow(3 / 180 * Math.PI + r, resultPoint); createArrow(-3 / 180 * Math.PI+ r, resultPoint); break; case 2: createArrow(6 / 180 * Math.PI + r, resultPoint); createArrow(r, resultPoint); createArrow(-6 / 180 * Math.PI + r, resultPoint); break; } break; case "ready": _isAttacking = false; _isComboAttack = true; _hitCount ++; break; } } var _arrows = []; function createArrow(r, point) { var image = factory.getTextureDisplay("knightFolder/arrow_1"); image.x = point.x; image.y = point.y; image.rotation = r * 180 / Math.PI; var vx = Math.cos(r) * 36; var vy = Math.sin(r) * 36; var arrow = { image:image, vx:vx, vy:vy }; _arrows.push(arrow); stage.addChild(image); } function updateArrows() { var arrow; var length = _arrows.length; for (var i = length - 1; i >= 0; i --) { arrow = _arrows[i]; arrow.vy += 1; arrow.image.x += arrow.vx; arrow.image.y += arrow.vy; arrow.image.rotation = Math.atan2(arrow.vy, arrow.vx) * 180 / Math.PI; if (arrow.image.y > 600) { _arrows.splice(i, 1); stage.removeChild(arrow.image); } } }
CSS
body{ background:#F0F0ED; }
HTML
Join Effecthub.com
Working with Global Gaming Artists and Developers!
Login
Sign Up
Or Login with Your Email Address:
Email
Password
Remember
Or Sign Up with Your Email Address:
Your Email
This field must contain a valid email
Set Password
Password should be at least 1 character
Stay informed via email