Add click method to image.

DESCRIPTION

@@ -1,6 +1,6 @@
 Package: phaserR
 Title: An R Interface to the Phaser.js Game Framework
-Version: 0.0.0.9012
+Version: 0.0.0.9013
 Authors@R: 
     person(
       given = "Maciej", 

R/PhaserGame.R

@@ -68,8 +68,8 @@ PhaserGame <- R6::R6Class(
     #' @param x Numeric. X-coordinate in pixels.
     #' @param y Numeric. Y-coordinate in pixels.
     #' @return Invisible; sends a custom message to the client.
-    add_image = function(name, url, x, y, visible = TRUE) {
-      return(Image$new(name, url, x, y, visible))
+    add_image = function(name, url, x, y, visible = TRUE, clickable = FALSE) {
+      return(Image$new(name, url, x, y, visible, clickable))
     },
 
     #' @description Add a background (tilemap) layer from Tiled JSON + tileset image(s).

R/images.R

@@ -1,11 +1,12 @@
 Image <- R6::R6Class(
   classname = "Image",
   public = list(
-    initialize = function(name, url, x, y, visible,
+    initialize = function(name, url, x, y, visible, clickable,
                           session = getDefaultReactiveDomain()) {
       private$session <- session
       private$name <- name
-      js <- sprintf("addImage('%s', '%s', %d, %d, %s);", name, url, x, y, tolower(visible))
+      js <- sprintf("addImage('%s', '%s', %d, %d, %s, %s);",
+                    name, url, x, y, tolower(visible), tolower(clickable))
       send_js(private, js)
     },
     show = function() {
@@ -15,6 +16,16 @@ Image <- R6::R6Class(
     hide = function() {
       js <- sprintf("hideImage('%s');", private$name)
       send_js(private, js)
+    },
+    #' @param event_fun A function.
+    click = function(event_fun, input) {
+      js <- sprintf("clickImage('%s');", private$name)
+      send_js(private, js)
+      observe_id <- paste0(private$name, "_click")
+      shiny::observeEvent(input[[observe_id]], {
+        evt <- input[[observe_id]]
+        event_fun(evt)
+      }, ignoreNULL = TRUE)
     }
   ),
   private = list(

inst/examples/hero_game.R

@@ -69,7 +69,8 @@ server <- function(input, output, session) {
     url = "assets/hero_game/buttons/talk.png",
     y = 600,
     x = 600,
-    visible = FALSE
+    visible = FALSE,
+    clickable = TRUE
   )
   game$add_overlap(
     object_one = "hero",
@@ -87,6 +88,12 @@ server <- function(input, output, session) {
     },
     input = input
   )
+  talk_btn$click(
+    event_fun = function(evt) {
+      browser()
+    },
+    input = input
+  )
 }
 
 shinyApp(ui, server)

inst/www/phaser-game.js

@@ -80,24 +80,6 @@ function addPlayerControls(name, directions, speed) {
   GameBridge.playerControls[name] = { speed, directions };
 };
 
-function addImage(imageName, imageUrl, x = null, y = null, visible = true) {
-  scene.load.image(imageName, imageUrl);
-
-  scene.load.once('complete', () => {
-    const px = x !== null
-      ? x
-      : scene.cameras.main.width  / 2;
-    const py = y !== null
-      ? y
-      : scene.cameras.main.height / 2;
-
-    scene[imageName] = scene.add.image(px, py, imageName);
-    scene[imageName].setVisible(visible);
-  });
-
-  scene.load.start();
-}
-
 function addMap(mapKey, mapUrl, tilesetUrls, tilesetNames, layerName) {
   scene.load.tilemapTiledJSON(mapKey, mapUrl);
   for (let i = 0; i < tilesetNames.length; i++) {

inst/www/phaser-image.js

@@ -1,7 +1,38 @@
+function addImage(imageName, imageUrl, x = null, y = null, visible = true, clickable = true) {
+  scene.load.image(imageName, imageUrl);
+
+  scene.load.once('complete', () => {
+    const px = x !== null
+      ? x
+      : scene.cameras.main.width  / 2;
+    const py = y !== null
+      ? y
+      : scene.cameras.main.height / 2;
+
+    scene[imageName] = scene.add.image(px, py, imageName);
+    if (clickable) {
+      scene[imageName].setInteractive();
+    }
+    scene[imageName].setVisible(visible);
+  });
+
+  scene.load.start();
+}
+
 function showImage(imageName) {
   scene[imageName].setVisible(true)
 }
 
 function hideImage(imageName) {
   scene[imageName].setVisible(false)
 }
+
+function clickImage(imageName) {
+  scene[imageName].on('pointerdown', () => {
+    console.log(imageName + ' clicked!');
+    Shiny.setInputValue(
+      imageName + '_click',
+      true
+    )
+  });
+}