rostrum.blog - A Pokémon sprite carousel with {slickR}

tl;dr

You can make fun little scrolling ‘carousel’ type widgets in R with the {slickR} package. I’ve made an example that shows Pokémon sprites (above). Click the small sprites at the bottom to scroll the carousel to that Pokémon’s evolution chain; click the full-size sprites to go to that character’s Bulbapedia page.

Merry-go-round

I was browsing GitHub and the {slickR} package by Jonathan Sidi was suggested as a repo to explore.

{slickR} is an htmlwidget that generates carousels using the Slick JavaScript library by Ken Wheeler.

You’ve seen carousels before. They’re pretty ubiquitous for scrolling horizontally through images on websites. {slickR} provides a neat way of embedding these in R Markdown documents and Shiny apps. Plus, the elements in the carousel can be basically anything (iframes, plots, etc), not just images.

PokéDemo

I followed the excellent guidance on the {slickR} site to set up a basic carousel featuring Pokémon sprites¹ from the Pokémon Black and White games, which I collected via veekun.com.

I’ve embedded the demo at the top of this page, but you can visit it on a dedicated page or see its source. These are probably best viewed on a desktop machine.

In fact, it’s three carousels that are stacked and synchronised: one with the front sprite, one with the back sprite and one that shows the number and name of the Pokémon. Click a sprite to go to the relevant page on Bulbapedia, the Pokémon wiki.

I’ve also set each page to display three ’mon at a time and that each page will advance by three. This is so that I can display one Pokémon evolutionary chain per page, since the max chain length is three (e.g. Bulbasaur > Ivysaur > Venusaur). I added a blank spacer pad where a chain was shorter than three (e.g. Rattata > Raticate > BLANK, or Farfetch’d > BLANK > BLANK).

The pages auto-advance in the demo above, but can be advanced manually in the standalone version by clicking the directional arrows, or by using your arrow keys if the widget has been selected.

It’s also possible to jump to a specific evolutionary chain by using the page ‘dots’ underneath the carousel. Here, you can click one of the tiny sprites to jump to the page that contains the evolutionary chain that starts with that Pokémon.

Carousel mechanics

Below is some illustrative code for the demo. The code for the full carousel demo is available from the matt-dray/pkmn_slickr repo.

Again, do check out the really helpful NBA example on the {slickR} website for more examples.

One carousel

Here’s an example of the code for an individual carousel that displays just the front-facing sprite:

front_carousel <- slickR(
  obj = pkmn2$sprite_front_src,
  objLinks = pkmn2$url,
  height = 200, width = "100%"
) +
  settings(
    autoplay = TRUE, arrows = FALSE,
    slidesToShow = 3, slidesToScroll = 3
  )

Basically, You call the slickR() function with arguments that define the object to display and also things like links (objLinks) and the size of the elements. Here, pkmn2$sprite_front_src is a vector of sprite image sources, for example.

You can then tweak the look and behaviour by adding settings() with a + (like {ggplot2}). Here, autoplay advances the slides automatically; arrows dictates whether to show manually-clickable advancement buttons; and slidesToShow and slidesToScroll control the number of elements seen on one ‘page’ of elements and how many elements to advance by.

Synced sandwich

I created two more of these {slickR} objects for the back sprite and the Pokémon name and number, with slight differences compared to the code above.

I then sandwiched all three together like this:

carousel <-
  front_carousel %synch%
  back_carousel %synch%
  names_carousel

The %synch% operator makes sure that advancing any of the carousels advances them all together.

Sprite dots

The third of the three carousels, the names_carousel has the argument dots = TRUE in its settings. This makes dots appear under the carousel to show which ‘page’ the carousel is currently displaying. You can also click these dots to jump to a given page.

You can change these dots to other things, like numeric values. I was able to use the guidance to replace the dots with sprites. This means you can click a mini sprite under the carousel to jump to the page where that Pokémon starts an evolutionary chain.

Stop, let me off

I have a lot of ideas for how to use this package, but for more on {slickR} in the meantime, check out:

the {slickR} site
the basic walkthrough
how to use {slickR} in Shiny and other advanced things
the package source

Environment

Session info

Last rendered: 2023-07-25 19:28:19 BST

R version 4.3.1 (2023-06-16)
Platform: aarch64-apple-darwin20 (64-bit)
Running under: macOS Ventura 13.2.1

Matrix products: default
BLAS:   /Library/Frameworks/R.framework/Versions/4.3-arm64/Resources/lib/libRblas.0.dylib 
LAPACK: /Library/Frameworks/R.framework/Versions/4.3-arm64/Resources/lib/libRlapack.dylib;  LAPACK version 3.11.0

locale:
[1] en_US.UTF-8/en_US.UTF-8/en_US.UTF-8/C/en_US.UTF-8/en_US.UTF-8

time zone: Europe/London
tzcode source: internal

attached base packages:
[1] stats     graphics  grDevices utils     datasets  methods   base     

loaded via a namespace (and not attached):
 [1] htmlwidgets_1.6.2   compiler_4.3.1      fastmap_1.1.1      
 [4] cli_3.6.1           tools_4.3.1         htmltools_0.5.5    
 [7] xaringanExtra_0.7.0 rstudioapi_0.15.0   yaml_2.3.7         
[10] rmarkdown_2.23      knitr_1.43.1        jsonlite_1.8.7     
[13] xfun_0.39           digest_0.6.33       rlang_1.1.1        
[16] evaluate_0.21

Footnotes

Pokémon and Pokémon character names are trademarks of Nintendo. Copyright is 1995–2020 Nintendo/Creatures Inc/GAME FREAK inc ↩︎

Reuse

CC BY-NC-SA 4.0