diff --git a/DESCRIPTION b/DESCRIPTION index e7bbd17..46ffc68 100644 --- a/DESCRIPTION +++ b/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", diff --git a/R/PhaserGame.R b/R/PhaserGame.R index 4ee7dbc..f0421aa 100644 --- a/R/PhaserGame.R +++ b/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). diff --git a/R/images.R b/R/images.R index 9015c48..7bffdce 100644 --- a/R/images.R +++ b/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( diff --git a/inst/examples/hero_game.R b/inst/examples/hero_game.R index 27292bd..030cd6f 100644 --- a/inst/examples/hero_game.R +++ b/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) diff --git a/inst/www/phaser-game.js b/inst/www/phaser-game.js index 61b6fe6..3b308c4 100644 --- a/inst/www/phaser-game.js +++ b/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++) { diff --git a/inst/www/phaser-image.js b/inst/www/phaser-image.js index d800f41..6a1d1f9 100644 --- a/inst/www/phaser-image.js +++ b/inst/www/phaser-image.js @@ -1,3 +1,24 @@ +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) } @@ -5,3 +26,13 @@ function showImage(imageName) { function hideImage(imageName) { scene[imageName].setVisible(false) } + +function clickImage(imageName) { + scene[imageName].on('pointerdown', () => { + console.log(imageName + ' clicked!'); + Shiny.setInputValue( + imageName + '_click', + true + ) + }); +}