Download the Shimeji Editor

The Shimeji Editor is easily accessible for the Google Chrome web internet browser with assistance for web browser extensions. Extensions are sustained on desktop computers only. If you use Google Chrome, girlfriend can straight activate the Shimeji Editor from the Chrome net Store. Click ADD come CHROME to include the expansion to your browser.

You are watching: How to make your own shimeji

*

Activate the Shimeji Editor by click the Shimeji button in the internet browser toolbar. A manuscript editor will certainly pop up and Shimejis concerned live. They play on internet pages girlfriend visit as lengthy the editor stays open.

Create your very own Shimeji

You can create your very own Shimeji or use among somebody else. Shimejis the are developed for the original Java application "しめじ" (created by Yuki Yamada of team Finity) space compatible if they have actually been repackaged because that the Shimeji Editor. I will certainly now explain how come package Shimejis.

Each animation contains of a set of sprites, which space actually images. A Shimeji have the right to perform lot of animations for this reason we need at least a couple of sprites to animate them. These sprites have to be linked to a single image, i beg your pardon is dubbed a sprite sheet, that includes all images.

*

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

*
*
*
*
*
*
*
*
*
*
*
*

The sprites should have actually a fixed position, since each position defines a details animation.

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

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

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

We administer URLs for the following few Shimejis together an example.

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

Thanks to the artists that drawed castle !!

Shimeji script Language

Shimejis interact with facets on the page and also because every web page is various we can script how they communicate with elements. Basically, Shimejis have the right to behave uniquely on every page as lengthy you manuscript them. Great scripting need skills, but because Shimejis react on alters directly that is prefer playing through your Shimejis in real-time. You have to share script with various other people, for this reason they can easily paste your code and see her cool creation.

The Scripting language is influenced by CSS, which world use to format web pages. If friend ever produced your own web site, you room probably acquainted with that language. We use the precise same syntax, however we expanded the language for this reason it"s perfect to specify sequences of interactions.

Basically friend specify a set of rules where order that the rules execute not matter. If the Shimeji meets the problem of a rule it have the right to decide to do an activity that is linked with that rule. If a problem mets rely on the current position and also currently performing activity of the Shimeji. In ~ every moment, only a subset of the rule is met and also the Shimeji select randomly one of the actions linked with this rules.

An instance of a rule:

#shimeji-world :bottom action: walk;This rule defines an walk action. If a Shimeji mets the #shimeji-world :bottom problem it will do the walk action. Below the #shimeji-world is a normal CSS selector that matches a HTML block element on the web page, in this instance an aspect with one id set to shimeji-world but any other CSS selector have the right to be used, watch the complete list of feasible CSS selectors. Notice that the #shimeji-world facet did not exist in the original web page yet it"s one element noted by the Shimeji Editor to specify edges that the internet browser window. The :bottom problem says that the rule should just be applied if the Shimeji access time the bottom edge that 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 shot some examples. Each example can run on the own. Don"t mix script of many examples since it can an outcome in unexpected behaviour uneven you desire to experiment.


Demo 1 open the Shimeji Editor and clear all text. Shimejis will obtain stuck after they have actually performed their existing action. Now paste the rule in the editor and also see just how a Shimeji begin walking if it hits the bottom edge. If a Shimeji isn"t top top the bottom leaf you deserve to grab that an drop the onto the bottom edge.

#shimeji-world :bottom action: walk;
Demo 2 because that the Shimeji to walk in a particular direction.

#shimeji-world :bottom action: walk left;
Demo 3 likewise climb increase the left wall.

#shimeji-world :bottom action: walk left; #shimeji-world :left action: rise up;
Demo 4 allow it autumn if it"s climbed come the top

#shimeji-world :bottom action: go left; #shimeji-world :left action: climb up; #shimeji-world :left:at(top) action: fall right;
Demo 5 point out a possibility the shimeji will autumn down indigenous the upper fifty percent part of the edge before it will the top.

#shimeji-world :bottom action: to walk left; #shimeji-world :left action: rise up; #shimeji-world :left:at(top) action: autumn right; #shimeji-world :left:between(50%, 100%):chance(50%) action: fall right;


Demo 6 connect with website elements. For example, permit it interact with wall on Facebook. We use the CSS selector .fbUserContent to pick block elements v the class fbUserContent. Additionally we specify the keyword outside in the activity because the Shimeji must climb and also walk at the external side that the block aspect instead that the inside.

#shimeji-world :bottom action: go 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 best outside;
Demo 7 (wrong way) make a shimeji sit somewhere on peak of a on facebook post. This manuscript is not working correctly due to the fact that on this facet there are 2 rules with :top where the rule with much more conditions will certainly win. So in this case the Shimeji will never walk again, since sit wins.

#shimeji-world :bottom action: to walk left; #shimeji-world :left action: rise up; #shimeji-world :left:at(top) action: loss right; .fbUserContent :left action: rise up outside; .fbUserContent :top action: walk best outside; .fbUserContent :top:between(0%, 100%) action: sit;
Demo 8 To fix the problem, use a unique keyword :enter top top the preeminence with a walk action. This overrules every ascendancy if the the Shimeji beginning the edge. So once Shimeji beginning the top edge this is the only dominance that will certainly be applied. But somewhere top top the go the :between(0%, 100%) condition is met and make the Shimeji sit down.

#shimeji-world :bottom action: walk left; #shimeji-world :left action: rise up; #shimeji-world :left:at(top) action: loss right; .fbUserContent :left action: rise up outside; .fbUserContent :top:enter action: walk right outside; .fbUserContent :top:between(0%, 100%) action: sit;
Demo 9 To obtain the Shimeji out of the sit state we very first need to define a preeminence that can be performed next. This deserve to be done by adding :sit to the problem of a rule that is at the very least as restrictive as the sitting rule, such the the rule overrules the sit rule however only once the Shimeji at this time is sitting. Also define the expression of the sit state, in this case between 1 and also 4 seconds.

#shimeji-world :bottom action: to walk left; #shimeji-world :left action: rise up; #shimeji-world :left:at(top) action: fall right; .fbUserContent :left action: climb up outside; .fbUserContent :top:enter action: walk appropriate outside; .fbUserContent :top:between(0%, 100%) action: sit 1s 4s; .fbUserContent :top:between(0%, 100%):sit action: fall;
Demo 10 define multiple following up rule so the shimeji can pick which one to perform. Note: If you want to like a particular action more than another, girlfriend should specify seperate rules for every action, and also give every dominance a :chance keyword v a worth that states the change the rules will be chosen.

See more: Aws Certified Solutions Architect - Associate (Released February 2018)

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

Example Scripts

To assist you understand the Shimeji manuscript language you deserve to look at the following instances that space specially composed for this sites.

YouTube manuscript 84 present of password (view) Tumblr script 98 present of password (view) DeviantArt manuscript 210 present of code (view)

How is this connected to desktop computer Shimeji?

The Shimeji Editor is a was standing alone project to do Shimejis easily accessible in the net browser. It different from the original desktop computer software in that Shimejis now connect with your browser and web pages. Girlfriend can quickly script and readjust Shimejis in real-time, which is a fun method to produce them. Scripts and also shimejis can easily be shared. To operation this task you only require a Chrome web browser with expansion support. No need for various other dependencies, therefore it will also works on Chromebooks!

Feedback?

Do friend have any suggestions to enhance the Shimeji Editor or boost the Shimeji scripting language? you re welcome let me recognize !

Contact

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

© Jarno Le Conté (2017)

(`-").-> (`-").-> _ ( OO)_ (OO )__ (_) \(OO )_ ( OO).-/ (_) ( OO)_(_)--\_) ,--. ,"-" ,-(`-"),--./ ,-.)(,------. | | | | | `---.| "-" / | |"->\ / `-----" `--" `--" `--" `--" `--" `------" `-----" `--" `-----"