{"id":768,"date":"2012-11-05T19:05:30","date_gmt":"2012-11-05T18:05:30","guid":{"rendered":"http:\/\/www.aymericlamboley.fr\/blog\/?p=768"},"modified":"2016-07-05T08:24:28","modified_gmt":"2016-07-05T06:24:28","slug":"playing-with-cadet-editor-and-awayphysics","status":"publish","type":"post","link":"http:\/\/www.aymericlamboley.fr\/blog\/playing-with-cadet-editor-and-awayphysics\/","title":{"rendered":"Playing with Cadet Editor 3D and AwayPhysics"},"content":{"rendered":"

The 3D part is a bit in stand-by this last weeks on the Citrus Engine<\/a>, because I’m polishing the engine for the V3 which should be out this week!<\/p>\n

I’ve never clearly introduced AwayPhysics in the Citrus Engine, so it’s the day! The idea is to have a similar pre-built platformer objects that we already have with Box2D and Nape but with AwayPhysics this time for 3D stuff! This work and Away3D support will evolve during the V3.<\/p>\n

Now that 3D views and physics are supported, it’s time to give a look on which tool we can use as a 3D game Level Editor. At first, I thought to Prefab<\/a>. This is the best tool to create a scene with Away3D, importing assets, add lights… But too complex for a simple level design, I mean : hey the Citrus Engine is not a concurrent to Unity3D<\/a> (which I started to learn thanks to this awesome tutorial<\/a>) \ud83d\ude00 Its 3D physics part is just here to create basic 3D game \/ puzzle. Also the level editor has to support object creation (physics object), this isn’t obvious with Prefab.
\nThen I gave a look to Cadet Editor<\/a>, the 3D editor is very easy to handle. You can create quickly sphere, cube and plane objects, add lights… That’s the right tool to see what can be done!<\/p>\n

<\/p>\n

I really enjoy the design of Cadet Editor, however it should manage right click with camera rotation instead of displaying a simple menu with a link to Away3D.
\nIn Cadet3D project are saved into a format close to MXML. See our examples and its code :
\n\"\"<\/a><\/p>\n

\r\n  \r\n    \r\n      \r\n        \r\n      <\/ns0:CameraComponent>\r\n    <\/cadetAway3D4:RendererAway3D>\r\n    \r\n      \r\n      \r\n        \r\n      <\/bones:ArrayCollection>\r\n      \r\n    <\/cadetAway3D4:MeshComponent>\r\n    \r\n      \r\n    <\/ns3:DirectionalLightComponent>\r\n    \r\n    \r\n      \r\n      \r\n        \r\n      <\/bones:ArrayCollection>\r\n      \r\n    <\/cadetAway3D4:MeshComponent>\r\n    \r\n      \r\n      \r\n        \r\n      <\/bones:ArrayCollection>\r\n      \r\n    <\/cadetAway3D4:MeshComponent>\r\n    \r\n      \r\n      \r\n        \r\n      <\/bones:ArrayCollection>\r\n      \r\n    <\/cadetAway3D4:MeshComponent>\r\n    \r\n      \r\n      \r\n        \r\n      <\/bones:ArrayCollection>\r\n      \r\n    <\/cadetAway3D4:MeshComponent>\r\n    \r\n      \r\n      \r\n        \r\n      <\/bones:ArrayCollection>\r\n      \r\n    <\/cadetAway3D4:MeshComponent>\r\n    \r\n      \r\n      \r\n        \r\n      <\/bones:ArrayCollection>\r\n      \r\n    <\/cadetAway3D4:MeshComponent>\r\n    \r\n      \r\n      \r\n        \r\n      <\/bones:ArrayCollection>\r\n      \r\n    <\/cadetAway3D4:MeshComponent>\r\n    \r\n      \r\n      \r\n        \r\n      <\/bones:ArrayCollection>\r\n      \r\n    <\/cadetAway3D4:MeshComponent>\r\n    \r\n      \r\n      \r\n        \r\n      <\/bones:ArrayCollection>\r\n      \r\n    <\/cadetAway3D4:MeshComponent>\r\n    \r\n      \r\n      \r\n        \r\n      <\/bones:ArrayCollection>\r\n      \r\n    <\/cadetAway3D4:MeshComponent>\r\n    \r\n      \r\n      \r\n        \r\n      <\/bones:ArrayCollection>\r\n      \r\n    <\/cadetAway3D4:MeshComponent>\r\n    \r\n      \r\n      \r\n        \r\n      <\/bones:ArrayCollection>\r\n      \r\n    <\/cadetAway3D4:MeshComponent>\r\n    \r\n      \r\n      \r\n        \r\n      <\/bones:ArrayCollection>\r\n      \r\n    <\/cadetAway3D4:MeshComponent>\r\n    \r\n      \r\n      \r\n        \r\n      <\/bones:ArrayCollection>\r\n      \r\n    <\/cadetAway3D4:MeshComponent>\r\n    \r\n      \r\n      \r\n        \r\n      <\/bones:ArrayCollection>\r\n      \r\n    <\/cadetAway3D4:MeshComponent>\r\n    \r\n      \r\n      \r\n        \r\n      <\/bones:ArrayCollection>\r\n      \r\n    <\/cadetAway3D4:MeshComponent>\r\n    \r\n    \r\n    \r\n  <\/bones:ArrayCollection>\r\n  \r\n  \r\n    \r\n  <\/bones:DependencyManager>\r\n<\/cadet:CadetScene><\/pre>\n
This format isn’t easy to handle! Cadet should really export to XML or JSON format.
\nAnyway this what I’ve done : demo<\/a>. You can remove the AwayPhysics debug view via the console :<\/p>\n
set awayPhysics visible false<\/pre>\n
As usual all the source code is available on the GitHub<\/a>.
\nThis is the GameState :<\/p>\n
package awayphysics.cadet3d {\r\n\r\n\timport away3d.controllers.HoverController;\r\n\timport away3d.debug.AwayStats;\r\n\r\n\timport com.citrusengine.core.State;\r\n\timport com.citrusengine.physics.awayphysics.AwayPhysics;\r\n\timport com.citrusengine.utils.ObjectMaker3D;\r\n\timport com.citrusengine.view.CitrusView;\r\n\timport com.citrusengine.view.away3dview.Away3DView;\r\n\r\n\timport flash.events.Event;\r\n\timport flash.events.MouseEvent;\r\n\timport flash.geom.Vector3D;\r\n\r\n\t\/**\r\n\t * @author Aymeric\r\n\t *\/\r\n\tpublic class Cadet3DGameState extends State {\r\n\t\t\r\n\t\t[Embed(source=\"\/..\/embed\/3D\/simpletest.away3d4\", mimeType=\"application\/octet-stream\")]\r\n\t\tprivate const _CADET_LEVEL:Class;\r\n\t\t\r\n\t\t\/\/ navigation variables\r\n\t\tprivate var _cameraController:HoverController;\r\n\r\n\t\tprivate var _move:Boolean = false;\r\n\t\tprivate var _lastPanAngle:Number;\r\n\t\tprivate var _lastTiltAngle:Number;\r\n\t\tprivate var _lastMouseX:Number;\r\n\t\tprivate var _lastMouseY:Number;\r\n\t\tprivate var _lookAtPosition:Vector3D = new Vector3D();\r\n\r\n\t\tpublic function Cadet3DGameState() {\r\n\t\t\t\r\n\t\t\tsuper();\r\n\t\t}\r\n\r\n\t\toverride public function initialize():void {\r\n\t\t\t\r\n\t\t\tsuper.initialize();\r\n\t\t\t\r\n\t\t\taddChild(new AwayStats((view as Away3DView).viewRoot));\r\n\t\t\t\r\n\t\t\tvar awayPhysics:AwayPhysics = new AwayPhysics(\"awayPhysics\");\r\n\t\t\tawayPhysics.visible = true;\r\n\t\t\tadd(awayPhysics);\r\n\t\t\t\r\n\t\t\tObjectMaker3D.FromCadetEditor3D(XML(new _CADET_LEVEL()));\r\n\t\t\t\r\n\t\t\t_cameraController = new HoverController((view as Away3DView).viewRoot.camera, null, 175, 20, 1000);\r\n\t\t\t\r\n\t\t\tstage.addEventListener(MouseEvent.MOUSE_DOWN, _onMouseDown);\r\n\t\t\tstage.addEventListener(MouseEvent.MOUSE_UP, _onMouseUp);\r\n\t\t\tstage.addEventListener(Event.MOUSE_LEAVE, _onMouseUp);\r\n\t\t\tstage.addEventListener(MouseEvent.MOUSE_WHEEL, _onMouseWheel);\r\n\t\t}\r\n\t\t\r\n\t\t\/\/ Make sure and call this override to specify Away3D view.\r\n\t\toverride protected function createView():CitrusView {\r\n\r\n\t\t\treturn new Away3DView(this);\r\n\t\t}\r\n\t\t\r\n\t\toverride public function destroy():void {\r\n\r\n\t\t\tstage.removeEventListener(MouseEvent.MOUSE_DOWN, _onMouseDown);\r\n\t\t\tstage.removeEventListener(MouseEvent.MOUSE_UP, _onMouseUp);\r\n\t\t\tstage.removeEventListener(Event.MOUSE_LEAVE, _onMouseUp);\r\n\t\t\tstage.removeEventListener(MouseEvent.MOUSE_WHEEL, _onMouseWheel);\r\n\r\n\t\t\tsuper.destroy();\r\n\t\t}\r\n\t\t\r\n\t\toverride public function update(timeDelta:Number):void {\r\n\r\n\t\t\tsuper.update(timeDelta);\r\n\r\n\t\t\tif (_move) {\r\n\t\t\t\t_cameraController.panAngle = 0.3 * (stage.mouseX - _lastMouseX) + _lastPanAngle;\r\n\t\t\t\t_cameraController.tiltAngle = 0.3 * (stage.mouseY - _lastMouseY) + _lastTiltAngle;\r\n\t\t\t}\r\n\r\n\t\t\t_cameraController.lookAtPosition = _lookAtPosition;\r\n\t\t}\r\n\t\t\r\n\t\tprivate function _onMouseDown(mEvt:MouseEvent):void {\r\n\t\t\t_lastPanAngle = _cameraController.panAngle;\r\n\t\t\t_lastTiltAngle = _cameraController.tiltAngle;\r\n\t\t\t_lastMouseX = stage.mouseX;\r\n\t\t\t_lastMouseY = stage.mouseY;\r\n\t\t\t_move = true;\r\n\t\t}\r\n\r\n\t\tprivate function _onMouseUp(evt:Event):void {\r\n\t\t\t_move = false;\r\n\t\t}\r\n\r\n\t\tprivate function _onMouseWheel(mEvt:MouseEvent):void {\r\n\r\n\t\t\t_cameraController.distance -= mEvt.delta * 5;\r\n\r\n\t\t\tif (_cameraController.distance < 100)\r\n\t\t\t\t_cameraController.distance = 100;\r\n\t\t\telse if (_cameraController.distance > 2000)\r\n\t\t\t\t_cameraController.distance = 2000;\r\n\t\t}\r\n\r\n\t}\r\n}<\/pre>\n
Like Flash as Level Editor or Tiled Map Editor, we use the ObjectMaker class. This is the template for Cadet Editor 3D :<\/p>\n
public static function FromCadetEditor3D(levelData:XML, addToCurrentState:Boolean = true):Array {\r\n\r\n\tvar ce:CitrusEngine = CitrusEngine.getInstance();\r\n\r\n\tvar params:Object;\r\n\r\n\tvar objects:Array = [];\r\n\r\n\tvar type:String;\r\n\tvar radius:Number;\r\n\r\n\tvar object:AwayPhysicsObject;\r\n\r\n\tfor each (var root:XML in levelData.children()) {\r\n\t\tfor each (var parent:XML in root.children()) {\r\n\r\n\t\t\ttype = parent.@name;\r\n\r\n\t\t\tif (type == \"Cube\" || type == \"Plane\" || type == \"Sphere\") {\r\n\r\n\t\t\t\tvar transform:Array = parent.@transform.split(\",\");\r\n\r\n\t\t\t\tparams = {};\r\n\t\t\t\tparams.x = transform[12];\r\n\t\t\t\tparams.y = transform[13];\r\n\t\t\t\tparams.z = transform[14];\r\n\r\n\t\t\t\tfor each (var child:XML in parent.children()) {\r\n\r\n\t\t\t\t\tfor each (var finalElement:XML in child.children()) {\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\tparams.width = finalElement.@width;\r\n\t\t\t\t\t\tparams.height = finalElement.@height;\r\n\t\t\t\t\t\tparams.depth = finalElement.@depth;\r\n\t\t\t\t\t\tradius = finalElement.@radius;\r\n\r\n\t\t\t\t\t\tif (radius)\r\n\t\t\t\t\t\t\tparams.radius = finalElement.@radius;\r\n\r\n\t\t\t\t\t\tif (type == \"Plane\") {\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\/\/ the plane seems to use the height as the depth\r\n\t\t\t\t\t\t\tparams.depth = params.height;\r\n\t\t\t\t\t\t\tparams.height = 0;\r\n\t\t\t\t\t\t\tparams.view = new Mesh(new CubeGeometry(params.width, params.height, params.depth), new ColorMaterial(0xFF0000));\r\n\t\t\t\t\t\t\tobject = new Platform(\"plane\", params);\r\n\r\n\t\t\t\t\t\t} else {\r\n\r\n\t\t\t\t\t\t\tif (params.radius) {\r\n\r\n\t\t\t\t\t\t\t\tparams.view = new Mesh(new SphereGeometry(params.radius), new ColorMaterial(0x00FF00));\r\n\t\t\t\t\t\t\t\tobject = new AwayPhysicsObject(\"sphere\", params);\r\n\r\n\t\t\t\t\t\t\t} else {\r\n\r\n\t\t\t\t\t\t\t\tparams.view = new Mesh(new CubeGeometry(params.width, params.height, params.depth), new ColorMaterial(0x0000FF));\r\n\t\t\t\t\t\t\t\tobject = new AwayPhysicsObject(\"cube\", params);\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\tobjects.push(object);\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\tif (addToCurrentState)\r\n\t\tfor each (object in objects) ce.state.add(object);\r\n\r\n\treturn objects;\r\n}<\/pre>\n
As you can notice, the object maker uses CE prebuilt objects for AwayPhysics but not in a dynamic way.<\/p>\n
This is some points that Cadet Editor should allow to be an excellent level editor :
\n– quickly most of the points are in Tiled Map Editor, checkout Citrus Engine support there<\/a>.
\n– an easy to parse exporter format (xml or json).
\n– adding personal properties so we can precize type, gravity, view for example directly in the level editor. A must have!<\/p>\n
I will continue my experiments and improve Cadet 3D support. I really hope that some of my requests will be added to Cadet Editor and then it will be an awesome 3D level editor for the CE!<\/p>\n","protected":false},"excerpt":{"rendered":"
The 3D part is a bit in stand-by this last weeks on the Citrus Engine, because I’m polishing the engine for the V3 which should be out this week! I’ve never clearly introduced AwayPhysics in the Citrus Engine, so it’s the day! The idea is to have a similar pre-built platformer objects that we already … Continue reading Playing with Cadet Editor 3D and AwayPhysics<\/span> →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0},"categories":[4,92,157,51,33,114],"tags":[15,93,159,158,50,34],"_links":{"self":[{"href":"http:\/\/www.aymericlamboley.fr\/blog\/wp-json\/wp\/v2\/posts\/768"}],"collection":[{"href":"http:\/\/www.aymericlamboley.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.aymericlamboley.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.aymericlamboley.fr\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.aymericlamboley.fr\/blog\/wp-json\/wp\/v2\/comments?post=768"}],"version-history":[{"count":11,"href":"http:\/\/www.aymericlamboley.fr\/blog\/wp-json\/wp\/v2\/posts\/768\/revisions"}],"predecessor-version":[{"id":1595,"href":"http:\/\/www.aymericlamboley.fr\/blog\/wp-json\/wp\/v2\/posts\/768\/revisions\/1595"}],"wp:attachment":[{"href":"http:\/\/www.aymericlamboley.fr\/blog\/wp-json\/wp\/v2\/media?parent=768"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.aymericlamboley.fr\/blog\/wp-json\/wp\/v2\/categories?post=768"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.aymericlamboley.fr\/blog\/wp-json\/wp\/v2\/tags?post=768"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}