Merge pull request #266 from AtomicGameEngine/JME-ATOMIC-EXAMPLEBROWSER

Resurrecting the example browser

Data/AtomicEditor/.gitignore

@@ -0,0 +1 @@
+AtomicExamples/*

Data/AtomicEditor/ExampleInfo/Examples.json

@@ -1,5 +1,5 @@
 {
-	"Examples" : [
+	"examples" : [
 			{
 				"name": "Physics Platformer 2D",
 				"desc" : "Moving platforms, vines, and neat 2D lighting",
@@ -13,7 +13,7 @@
 				"screenshot" : "ToonTown.png",
 				"folder" : "ToonTown",
 				"module" : "3D"
-			},			
+			},
 			{
 				"name": "SpaceGame",
 				"desc" : "A 2D Arcade Space Game",
@@ -28,14 +28,14 @@
 				"screenshot" : "Roboman3D.png",
 				"folder" : "RoboMan3D",
 				"module" : "3D"
-			},			
+			},
 			{
 				"name": "Character Animation 2D",
 				"desc" : "Example of controlling a Spriter animated character",
 				"screenshot" : "CharacterAnimation2D.png",
 				"folder" : "CharacterAnimation2D",
 				"module" : "2D"
-			},			
+			},
 			{
 				"name": "Character Animation 3D",
 				"desc" : "Example of controlling a skeletally animated character",
@@ -58,5 +58,5 @@
 				"module" : "2D"
 			}
 
-	] 
-}
+	]
+}

Script/AtomicEditor/ui/frames/WelcomeFrame.ts

@@ -12,7 +12,7 @@ class WelcomeFrame extends ScriptWidget {
 
         this.load("AtomicEditor/editor/ui/welcomeframe.tb.txt");
 
-        var recentProjects = <Atomic.UILayout> this.getWidget("recentprojects");
+        var recentProjects = <Atomic.UILayout>this.getWidget("recentprojects");
         this.gravity = Atomic.UI_GRAVITY_ALL;
 
         this.recentList = new Atomic.UIListView();
@@ -20,7 +20,7 @@ class WelcomeFrame extends ScriptWidget {
 
         recentProjects.addChild(this.recentList);
 
-        var container = <Atomic.UILayout> parent.getWidget("resourceviewcontainer");
+        var container = <Atomic.UILayout>parent.getWidget("resourceviewcontainer");
 
         container.addChild(this);
 
@@ -29,10 +29,137 @@ class WelcomeFrame extends ScriptWidget {
         this.subscribeToEvent(EditorEvents.CloseProject, () => {
             this.updateRecentProjects();
         });
-        
+
+        this.initExampleBrowser();
+
+    }
+
+    handleClickedExample(example: ExampleFormat) {
+
+      var ops = EditorUI.getModelOps();
+      var env = ToolCore.toolEnvironment;
+      ops.showCreateProject(env.toolDataDir + "AtomicExamples/" + example.folder + "/", this.exampleInfoDir + example.screenshot);
+
+    }
+
+    addExample(example: ExampleFormat) {
+
+        var exlayout = <Atomic.UILayout>this.getWidget("examples_layout");
+
+        if (!this.currentExampleLayout) {
+            this.currentExampleLayout = new Atomic.UILayout();
+            this.currentExampleLayout.spacing = 8;
+            exlayout.addChild(this.currentExampleLayout);
+        }
+
+        // 200x150
+
+        var exampleLayout = new Atomic.UILayout();
+        exampleLayout.skinBg = "StarCondition";
+        exampleLayout.axis = Atomic.UI_AXIS_Y;
+        exampleLayout.layoutDistribution = Atomic.UI_LAYOUT_DISTRIBUTION_GRAVITY;
+        exampleLayout.layoutSize = Atomic.UI_LAYOUT_SIZE_AVAILABLE;
+
+        // IMAGE BUTTON
+
+        var id = example.name;
+
+        var button = new Atomic.UIButton();
+        button.skinBg = "StarButton";
+        button.id = id;
+        var image = new Atomic.UIImageWidget();
+
+        button.onClick = () => {
+
+          this.handleClickedExample(example);
+
+        }
+
+        image.image = this.exampleInfoDir + example.screenshot;
+        image.skinBg = "ImageFrame";
+        var rect = [0, 0, image.imageWidth / 2, image.imageHeight / 2];
+        image.rect = rect;
+
+        // NAME FIELD
+        var nameField = new Atomic.UITextField();
+        nameField.skinBg = "ImageCaption";
+        nameField.text = example.name;
+
+        var nameRect = [0, image.imageHeight / 2 - 16, image.imageWidth / 2, image.imageHeight / 2];
+
+        nameField.rect = nameRect;
+
+        nameField.gravity = Atomic.UI_GRAVITY_BOTTOM;
+
+        image.addChild(nameField);
+
+        button.addChild(image);
+
+        var lp = new Atomic.UILayoutParams();
+        lp.minWidth = image.imageWidth / 2;
+        lp.minHeight = image.imageHeight / 2;
+
+        button.layoutParams = lp;
+
+        button.gravity = Atomic.UI_GRAVITY_LEFT;
+
+        exampleLayout.addChild(button);
+
+        // DESC TEXT
+
+        var descField = new Atomic.UIEditField();
+        descField.styling = true;
+        descField.multiline = true;
+        descField.readOnly = true;
+        descField.wrapping = true;
+
+        var styleDesc = "<color #A9A9A9>" + example.desc + "</color>";
+
+        descField.text = styleDesc;
+
+        descField.adaptToContentSize = true;
+
+        lp.height = 42;
+
+        lp.width = image.imageWidth / 2;
+
+        descField.layoutParams = lp;
+
+        exampleLayout.addChild(descField);
+
+        this.currentExampleLayout.addChild(exampleLayout);
+
+        this.exampleCount++;
+        // three across, todo, be smarter about this
+        if (!(this.exampleCount % 3)) {
+            this.currentExampleLayout = null;
+        }
+
+    }
+
+    initExampleBrowser() {
+
+        var env = ToolCore.toolEnvironment;
+
+        this.exampleInfoDir =env.toolDataDir + "ExampleInfo/";
+
+        var exampleJsonFile = this.exampleInfoDir + "Examples.json";
+
+        var jsonFile = new Atomic.File(exampleJsonFile, Atomic.FILE_READ);
+        if (!jsonFile.isOpen())
+            return;
+
+        var examples = <ExamplesFormat>JSON.parse(jsonFile.readText());
+
+        for (var i in examples.examples) {
+
+            this.addExample(examples.examples[i]);
+        }
+
     }
 
     handleWidgetEvent(ev: Atomic.UIWidgetEvent) {
+
         if (ev.type == Atomic.UI_EVENT_TYPE_RIGHT_POINTER_UP) {
             if (ev.target.id == "recentList") {
                 this.openFrameMenu(ev.x, ev.y);
@@ -82,10 +209,10 @@ class WelcomeFrame extends ScriptWidget {
     updateRecentProjects() {
 
         this.recentList.deleteAllItems();
-        
+
         var prefs = Preferences.getInstance();
         prefs.updateRecentProjects();
-        
+
         this.recent = prefs.recentProjects;
 
         for (var i in this.recent) {
@@ -101,9 +228,29 @@ class WelcomeFrame extends ScriptWidget {
         menu.show(menuButtons, x, y);
     }
 
+    // examples
+    exampleInfoDir: string;
+    exampleCount = 0;
+    currentExampleLayout: Atomic.UILayout;
+    exampleInfos:[ExampleFormat];
+
     recent: string[] = [];
     recentList: Atomic.UIListView;
 
 }
 
+class ExamplesFormat {
+
+    examples: [ExampleFormat];
+
+}
+
+class ExampleFormat {
+    name: string;
+    desc: string;
+    screenshot: string;
+    folder: string;
+    module: string;
+}
+
 export = WelcomeFrame;

Script/AtomicEditor/ui/modal/ModalOps.ts

@@ -24,11 +24,11 @@ class ModalOps extends Atomic.ScriptObject {
 
     }
 
-    showCreateProject(projectTemplateFolder: string) {
+    showCreateProject(projectTemplateFolder: string, imagePath:string = "") {
 
         if (this.show()) {
 
-            this.opWindow = new CreateProject(projectTemplateFolder);
+            this.opWindow = new CreateProject(projectTemplateFolder, imagePath);
 
         }
 

Script/AtomicEditor/ui/modal/NewProject.ts

@@ -37,8 +37,8 @@ class NewProject extends ModalWindow {
 
             if (projectType) {
 
-                var env = ToolCore.getToolEnvironment();
-                var projectTemplateFolder = env.projectTemplatesDir + projectType;
+                var env = ToolCore.toolEnvironment;
+                var projectTemplateFolder = env.toolDataDir + "ProjectTemplates/" + projectType;
 
                 this.hide();
 

Source/Atomic/UI/UIEditField.cpp

@@ -38,6 +38,17 @@ void UIEditField::SetReadOnly(bool readonly)
 
 }
 
+void UIEditField::SetStyling(bool styling)
+{
+    if (!widget_)
+        return;
+
+    TBEditField* w = (TBEditField*) widget_;
+
+    w->SetStyling(styling);
+
+}
+
 void UIEditField::SetMultiline(bool multiline)
 {
     if (!widget_)

Source/Atomic/UI/UIEditField.h

@@ -37,6 +37,7 @@ public:
     void SetEditType(UI_EDIT_TYPE type);
 
     void SetReadOnly(bool readonly);
+    void SetStyling(bool styling);
     void SetMultiline(bool multiline);
 
     void ScrollTo(int x, int y);

Source/Atomic/UI/UIImageWidget.cpp

@@ -29,6 +29,24 @@ UIImageWidget::~UIImageWidget()
 {
 }
 
+int UIImageWidget::GetImageWidth() const
+{
+    if (!widget_)
+        return 0;
+
+    return ((TBImageWidget*) widget_)->GetImageWidth();
+
+}
+
+int UIImageWidget::GetImageHeight() const
+{
+    if (!widget_)
+        return 0;
+
+    return ((TBImageWidget*) widget_)->GetImageHeight();
+
+}
+
 void UIImageWidget::SetImage(const String& imagePath)
 {
     if (!widget_)

Source/Atomic/UI/UIImageWidget.h

@@ -18,6 +18,9 @@ public:
 
     void SetImage(const String& imagePath);
 
+    int GetImageWidth() const;
+    int GetImageHeight() const;
+
 protected:
 
     virtual bool OnEvent(const tb::TBWidgetEvent &ev);

Source/ToolCore/ToolEnvironment.cpp

@@ -38,7 +38,7 @@ bool ToolEnvironment::InitFromPackage()
 #endif
 
 	String resourcesDir = GetPath(RemoveTrailingSlash(fileSystem->GetProgramDir())) + "Resources/";
-	projectTemplatesDir_ = resourcesDir + "ProjectTemplates/";
+    toolDataDir_ =  resourcesDir + "ToolData/";
 
     return true;
 }
@@ -46,7 +46,6 @@ bool ToolEnvironment::InitFromPackage()
 bool ToolEnvironment::InitFromJSON(bool atomicTool)
 {
 
-
     // make sure config path is initialized
     GetDevConfigFilename();
 
@@ -119,7 +118,7 @@ void ToolEnvironment::SetRootSourceDir(const String& sourceDir)
     resourcePlayerDataDir_ = rootSourceDir_ + "Resources/PlayerData";
     resourceEditorDataDir_ = rootSourceDir_ + "Resources/EditorData";
 
-    projectTemplatesDir_ = rootSourceDir_ + "Data/AtomicEditor/ProjectTemplates/";
+    toolDataDir_ = rootSourceDir_ + "Data/AtomicEditor/";
 }
 
 void ToolEnvironment::SetRootBuildDir(const String& buildDir, bool setBinaryPaths)
@@ -166,8 +165,7 @@ void ToolEnvironment::Dump()
     LOGINFOF("Tool Binary: %s", toolBinary_.CString());
 
 
-    LOGINFOF("Project Templates Dir: %s", projectTemplatesDir_.CString());
-    LOGINFOF("Examples Dir: %s", examplesDir_.CString());
+    LOGINFOF("Tool Data Dir: %s", toolDataDir_.CString());
 
     LOGINFOF("Deployment Data Dir: %s", deploymentDataDir_.CString());
 

Source/ToolCore/ToolEnvironment.h

@@ -48,8 +48,7 @@ public:
     /// Data directories
     const String& GetDeploymentDataDir() { return toolBinary_; }
 
-    const String& GetProjectTemplatesDir() { return projectTemplatesDir_; }
-    const String& GetExamplesDir() { return examplesDir_; }
+    const String& GetToolDataDir() { return toolDataDir_; }
 
     const String& GetDevConfigFilename();
 
@@ -72,11 +71,7 @@ private:
     // path to the AtomicTool command line binary
     String toolBinary_;
 
-    // examples directory
-    String examplesDir_;
-
-    // project templates directory
-    String projectTemplatesDir_;
+    String toolDataDir_;
 
     // resources
     String resourceCoreDataDir_;