Responsive layout improvements (#119)

* Work in progress

* Replace brackets with parantheses

* Introduce fit + align modes

* Project update

* Fix positioning when using "game" coordinate system

* Mouse input fixes

* Normalize input in the component

* Use view matrix

* Update documentation

* Update plugins and content

Author: Jhonnyg

.gitignore

@@ -17,4 +17,6 @@ builtins
 /bundle*
 bob.jar
 /defold-rive/lib/**/ext.settings
-/.editor_settings
+/.editor_settings
+*.keystore*
+manifest.*

defold-rive/api/rive.script_api

@@ -235,3 +235,13 @@
         type: string
         desc: (OPTIONAL) If specified, the text run will be set in the specified nested artboard
 
+#*****************************************************************************************************
+
+  - name: get_projection_matrix
+    type: function
+    desc: Get an orthographic projection matrix that can be used to project regular Defold components into the same coordinate space as the rive model when using the 'fullscreen' coordinate space.
+
+    return:
+    - name: matrix
+      type: vmath.matrix4
+      desc: The projection matrix

defold-rive/commonsrc/rive_ddf.proto

@@ -9,8 +9,8 @@ option java_outer_classname = "Rive";
 
 message RiveSceneDesc
 {
-    required string scene         = 1 [(resource)=true];
-    optional string atlas         = 2 [(resource)=true];
+    required string scene = 1 [(resource)=true];
+    optional string atlas = 2 [(resource)=true];
 }
 
 message RiveModelDesc
@@ -23,6 +23,39 @@ message RiveModelDesc
         BLEND_MODE_SCREEN    = 4 [(displayName) = "Screen"];
     }
 
+    // Matches rive::Fit (see layout.hpp)
+    enum Fit
+    {
+        FIT_FILL        = 0 [(displayName) = "Fill"];
+        FIT_CONTAIN     = 1 [(displayName) = "Contain"];
+        FIT_COVER       = 2 [(displayName) = "Cover"];
+        FIT_FIT_WIDTH   = 3 [(displayName) = "Fit Width"];
+        FIT_FIT_HEIGHT  = 4 [(displayName) = "Fit Height"];
+        FIT_NONE        = 5 [(displayName) = "None"];
+        FIT_SCALE_DOWN  = 6 [(displayName) = "ScaleDown"];
+        FIT_LAYOUT      = 7 [(displayName) = "Layout"];
+    }
+
+    // Matches rive::Alignment (see layout.hpp)
+    enum Alignment
+    {
+        ALIGNMENT_TOP_LEFT      = 0 [(displayName) = "Top Left"];
+        ALIGNMENT_TOP_CENTER    = 1 [(displayName) = "Top Center"];
+        ALIGNMENT_TOP_RIGHT     = 2 [(displayName) = "Top Right"];
+        ALIGNMENT_CENTER_LEFT   = 3 [(displayName) = "Center Left"];
+        ALIGNMENT_CENTER        = 4 [(displayName) = "Center"];
+        ALIGNMENT_CENTER_RIGHT  = 5 [(displayName) = "Center Right"];
+        ALIGNMENT_BOTTOM_LEFT   = 6 [(displayName) = "Bottom Left"];
+        ALIGNMENT_BOTTOM_CENTER = 7 [(displayName) = "Bottom Center"];
+        ALIGNMENT_BOTTOM_RIGHT  = 8 [(displayName) = "Bottom Right"];
+    }
+
+    enum CoordinateSystem
+    {
+        COORDINATE_SYSTEM_FULLSCREEN = 0 [(displayName) = "Fullscreen"];
+        COORDINATE_SYSTEM_RIVE       = 1 [(displayName) = "Rive"];
+    }
+
     required string scene                   = 1 [(resource)=true];
     required string default_animation       = 2;
     optional string material                = 3 [(resource)=true, default="/defold-rive/assets/rivemodel.material"];
@@ -31,6 +64,10 @@ message RiveModelDesc
     optional bool create_go_bones           = 6 [default=false];
     optional string artboard                = 7;
 
+    optional CoordinateSystem coordinate_system = 8 [default = COORDINATE_SYSTEM_FULLSCREEN];
+    optional Fit artboard_fit                   = 9 [default = FIT_NONE];
+    optional Alignment artboard_alignment       = 10 [default = ALIGNMENT_CENTER];
+
     // E.g. various per-instance tesselation options
     //optional float tesselation_option1    = 4 [default = 0.0];
 }

defold-rive/editor/src/rive.clj

@@ -42,6 +42,9 @@
 (def rive-scene-pb-class (workspace/load-class! "com.dynamo.rive.proto.Rive$RiveSceneDesc"))
 (def rive-model-pb-class (workspace/load-class! "com.dynamo.rive.proto.Rive$RiveModelDesc"))
 (def blend-mode-pb-class (workspace/load-class! "com.dynamo.rive.proto.Rive$RiveModelDesc$BlendMode"))
+(def coordinate-system-pb-class (workspace/load-class! "com.dynamo.rive.proto.Rive$RiveModelDesc$CoordinateSystem"))
+(def artboard-fit-pb-class (workspace/load-class! "com.dynamo.rive.proto.Rive$RiveModelDesc$Fit"))
+(def artboard-alignment-pb-class (workspace/load-class! "com.dynamo.rive.proto.Rive$RiveModelDesc$Alignment"))
 
 (def rive-file-icon "/defold-rive/editor/resources/icons/32/Icons_17-Rive-file.png")
 (def rive-scene-icon "/defold-rive/editor/resources/icons/32/Icons_16-Rive-scene.png")
@@ -95,7 +98,10 @@
         default-animation :default-animation
         default-state-machine :default-state-machine
         blend-mode :blend-mode
-        create-go-bones :create-go-bones))))
+        create-go-bones :create-go-bones
+        coordinate-system :coordinate-system
+        artboard-fit :artboard-fit
+        artboard-alignment :artboard-alignment))))
 
 (g/defnk produce-transform [position rotation scale]
   (math/->mat4-non-uniform (Vector3d. (double-array position))
@@ -605,7 +611,7 @@
             (dynamic error (g/fnk [_node-id atlas]
                                   (validate-scene-atlas _node-id atlas))))
 
-; This property isn't visible, but here to allow us to preview the .spinescene
+; This property isn't visible, but here to allow us to preview the .rivescene
   (property material resource/Resource ; Default assigned in load-fn.
             (value (gu/passthrough material-resource))
             (set (fn [evaluation-context self old-value new-value]
@@ -667,15 +673,18 @@
 ; .rivemodel (The "instance" file)
 ;
 
-(g/defnk produce-rivemodel-save-value [rive-scene-resource artboard default-animation default-state-machine material-resource blend-mode create-go-bones]
+(g/defnk produce-rivemodel-save-value [rive-scene-resource artboard default-animation default-state-machine material-resource blend-mode create-go-bones coordinate-system artboard-fit artboard-alignment]
   (protobuf/make-map-without-defaults rive-model-pb-class
     :scene (resource/resource->proj-path rive-scene-resource)
     :material (resource/resource->proj-path material-resource)
     :artboard artboard
     :default-animation default-animation
     :default-state-machine default-state-machine
     :blend-mode blend-mode
-    :create-go-bones create-go-bones))
+    :create-go-bones create-go-bones
+    :coordinate-system coordinate-system
+    :artboard-fit artboard-fit
+    :artboard-alignment artboard-alignment))
 
 (defn- validate-model-artboard [node-id rive-scene rive-artboards artboard]
   (when (and rive-scene (not-empty artboard))
@@ -788,6 +797,15 @@
             (dynamic edit-type (g/fnk [rive-anim-ids] (properties/->choicebox (cons "" rive-anim-ids)))))
   (property create-go-bones g/Bool (default (protobuf/default rive-model-pb-class :create-go-bones)))
 
+  (property coordinate-system g/Any (default (protobuf/default rive-model-pb-class :coordinate-system))
+            (dynamic edit-type (g/constantly (properties/->pb-choicebox coordinate-system-pb-class))))
+
+  (property artboard-fit g/Any (default (protobuf/default rive-model-pb-class :artboard-fit))
+            (dynamic edit-type (g/constantly (properties/->pb-choicebox artboard-fit-pb-class))))
+
+  (property artboard-alignment g/Any (default (protobuf/default rive-model-pb-class :artboard-alignment))
+            (dynamic edit-type (g/constantly (properties/->pb-choicebox artboard-alignment-pb-class))))
+
   (input dep-build-targets g/Any :array)
   (input rive-file-handle g/Any)
   (input rive-scene-resource resource/Resource)