Shimeji Editor / shimejis.xyz

Download the Shimeji Editor

The Shimeji Editor is available for the Google Chrome web browser with support for browser extensions. Extensions are supported on desktop computers only. If you use Google Chrome, you can directly activate the Shimeji Editor from the Chrome Web Store. Click ADD TO CHROME to add the extension to your browser.

Activate the Shimeji Editor by clicking the Shimeji button in the browser toolbar. A script editor will pop up and Shimejis come to live. They play on web pages you visit as long the editor stays open.

Create your own Shimeji

You can create your own Shimeji or use one of somebody else. Shimejis that are created for the original Java Application "しめじ" (created by Yuki Yamada of Group Finity) are compatible if they have been repackaged for the Shimeji Editor. I will now explain how to package Shimejis.

Each animation contains of a set of sprites, which are actually images. A Shimeji can perform multiple animations so we need at least a few sprites to animate them. These sprites should be combined to a single image, which is called a sprite sheet, that contains all images.

example spritesheet

Above you see an example of a Shimeji sprite sheet that is ready for use. The sheet of size 512 x 384 pixels contains 12 sprites, each of size 128 x 128 pixels.

The sprites should have a fixed position, because each position defines a specific animation.

stand	walk	walk	climb
fall	dangle	dangle	climb
fall right	fall left	sit	climb

If you want to package an existing Shimeji, these animations probably correspond with shime1-6.png and shime9-14.png. Align them on the sheet, and your sprite sheet is ready.

A finished sprite sheet should be uploaded somewhere to the web, such that it is accessible through an URL. Then put that URL in the Shimeji Editor and your Shimeji will pop up.

We provide URLs for the following few Shimejis as an example.

Kagamine Len Shimeji: URL:
Kagamine Rin Shimeji: URL:
Hatsune Miku Shimeji: URL:
Original Shimeji Shimeji: URL:

Thanks to the artists who drawed them !!

Shimeji Script Language

Shimejis interact with elements on the page and because every web page is different we can script how they interact with elements. Basically, Shimejis can behave uniquely on every page as long you script them. Good scripting require skills, but because Shimejis react on changes directly it is like playing with your Shimejis in real-time. You should share scripts with other people, so they can easily paste your code and see your cool creation.

The Scripting language is inspired by CSS, which people use to style web pages. If you ever created your own web site, you are probably familiar with that language. We use the exact same syntax, but we extended the language so it's suitable to define sequences of interactions.

Basically you specify a set of rules where order of the rules do not matter. If the Shimeji meets the condition of a rule it can decide to perform an action that is associated with that rule. If a condition mets depend on the current position and currently performing action of the Shimeji. At every moment, only a subset of the rules is met and the Shimeji choose randomly one of the actions associated with these rules.

An example of a rule:


#shimeji-world :bottom {
  action: walk;
}

This rule defines an walk action. If a Shimeji mets the #shimeji-world :bottom condition it will perform the walk action. Here the #shimeji-world is a normal CSS selector that matches a HTML block element on the web page, in this case an element with an id set to shimeji-world but any other CSS selector can be used, see the full list of possible CSS selectors. Notice that the #shimeji-world element did not exist in the original web page but it's an element provided by the Shimeji Editor to define edges of the browser window. The :bottom condition says that the rule should only be applied if the Shimeji hits the bottom edge of the seleted block element. The action walk makes the Shimeji actually walk left or right on the selected edge if the Shimeji decides to perform this action.

Scripting Tutorial

Now let's try some examples. Each example can run on its own. Don't mix scripts of multiple examples because it can result in unexpected behaviour unless you want to experiment.

Demo 1 Open the Shimeji Editor and clear all text. Shimejis will get stuck after they have performed their current action. Now paste the rule in the editor and see how a Shimeji start walking if it hits the bottom edge. If a Shimeji isn't on the bottom edge you can grab it an drop it onto the bottom edge.


  #shimeji-world :bottom {
    action: walk;
  }

Demo 2 For the Shimeji to walk in a certain direction.


  #shimeji-world :bottom {
    action: walk left;
  }

Demo 3 Also climb up the left wall.


  #shimeji-world :bottom {
    action: walk left;
  }
  #shimeji-world :left {
    action: climb up;
  }

Demo 4 Let it fall if it's climbed to the top


  #shimeji-world :bottom {
    action: walk left;
  }
  #shimeji-world :left {
    action: climb up;
  }
  #shimeji-world :left:at(top) {
    action: fall right;
  }

Demo 5 Specify a chance the shimeji will fall down from the upper half part of the edge before it reaches the top.


  #shimeji-world :bottom {
    action: walk left;
  }
  #shimeji-world :left {
    action: climb up;
  }
  #shimeji-world :left:at(top) {
    action: fall right;
  }
  #shimeji-world :left:between(50%, 100%):chance(50%) {
    action: fall right;
  }

Demo 6 Interact with site elements. For example, let it interact with wall on Facebook. We use the CSS selector .fbUserContent to select block elements with the class fbUserContent. Furthermore we specify the keyword outside in the action because the Shimeji must climb and walk at the outer side of the block element instead of the inside.


  #shimeji-world :bottom {
    action: walk left;
  }
  #shimeji-world :left {
    action: climb up;
  }
  #shimeji-world :left:at(top) {
    action: fall right;
  }
  .fbUserContent :left {
    action: climb up outside;
  }
  .fbUserContent :top {
    action: walk right outside;
  }

Demo 7 (wrong way) Make a shimeji sit somewhere on top of a Facebook post. This script is not working correctly because on this element there are 2 rules with :top where the rule with more conditions will win. So in this case the Shimeji will never walk again, because sit wins.


  #shimeji-world :bottom {
    action: walk left;
  }
  #shimeji-world :left {
    action: climb up;
  }
  #shimeji-world :left:at(top) {
    action: fall right;
  }
  .fbUserContent :left {
    action: climb up outside;
  }
  .fbUserContent :top {
    action: walk right outside;
  }
  .fbUserContent :top:between(0%, 100%) {
    action: sit;
  }

Demo 8 To solve the problem, use a special keyword :enter on the rule with a walk action. This overrules every rule if the the Shimeji enters the edge. So when Shimeji enters the top edge this is the only rule that will be applied. But somewhere on the walk the :between(0%, 100%) condition is met and make the Shimeji sit down.


  #shimeji-world :bottom {
    action: walk left;
  }
  #shimeji-world :left {
    action: climb up;
  }
  #shimeji-world :left:at(top) {
    action: fall right;
  }
  .fbUserContent :left {
    action: climb up outside;
  }
  .fbUserContent :top:enter {
    action: walk right outside;
  }
  .fbUserContent :top:between(0%, 100%) {
    action: sit;
  }

Demo 9 To get the Shimeji out of the sitting state we first need to define a rule that can be performed next. This can be done by adding :sit to the condition of a rule that is at least as restrictive as the sitting rule, such that the rule overrules the sitting rule but only when the Shimeji currently is sitting. Also define the duration of the sitting state, in this case between 1 and 4 seconds.


  #shimeji-world :bottom {
    action: walk left;
  }
  #shimeji-world :left {
    action: climb up;
  }
  #shimeji-world :left:at(top) {
    action: fall right;
  }
  .fbUserContent :left {
    action: climb up outside;
  }
  .fbUserContent :top:enter {
    action: walk right outside;
  }
  .fbUserContent :top:between(0%, 100%) {
    action: sit 1s 4s;
  }
  .fbUserContent :top:between(0%, 100%):sit {
    action: fall;
  }

Demo 10 Define multiple following up rules so the shimeji can choose which one to perform. Note: If you want to prefer a certain action more than another, you should define seperate rules for every action, and give every rule a :chance keyword with a value that specifies the change the rules will be chosen.


  #shimeji-world :bottom {
    action: walk left;
  }
  #shimeji-world :left {
    action: climb up;
  }
  #shimeji-world :left:at(top) {
    action: fall right;
  }
  .fbUserContent :left {
    action: climb up outside;
  }
  .fbUserContent :top:enter {
    action: walk right outside;
  }
  .fbUserContent :top:between(0%, 100%) {
    action: sit 1s 4s;
  }
  .fbUserContent :top:between(0%, 100%):sit {
    action: stand;
    action: fall;
    action: walk left inside;
    action: walk right inside;
  }

Example Scripts

To help you understand the Shimeji script language you can look at the following examples that are specially written for these sites.

YouTube script: 84 lines of code (view)
Tumblr script: 98 lines of code (view)
DeviantArt script: 210 lines of code (view)

How is this related to Desktop Shimeji?

The Shimeji Editor is a stand alone project to make Shimejis available in the web browser. It differs from the original desktop software in that Shimejis now interact with your browser and web pages. You can easily script and change Shimejis in real-time, which is a fun way to create them. Scripts and shimejis can easily be shared. To run this project you only need a Chrome Browser with extension support. No need for other dependencies, therefore it will also works on Chromebooks!

Feedback?

Do you have any suggestions to improve the Shimeji Editor or improve the Shimeji scripting language? Please let me know !

Contact

For contact, e-mail me at: shimeji@hckr.me