

CSS Pirate Ship Simulator with Sass, Compass and CoffeeScript - ruemic
http://css-pirate-ship.yourwebisonline.com/

======
jjellyy
Hi, cool demo.

I would highly suggest using a css transform to move your background.

In compass something like:

@include transform(translate3d(-100px, 0px, 0px)); @include
transform(translate3d(x, y, z));

It will move the already rendered pixels instead of moving all the elements in
the dom, this avoids the endless number of re-flows from the browser engine
which are not neccessary when the content inside the background is not moving.

this should make it buttery smooth.

in fact if you are moving anything try and use a transform when possible. You
will see huge increases in frame rate.

One more thing, Chrome is incredibly fast and masks these performance
bottlenecks. Try using safari or firefox and you will see a much larger
difference.

~~~
ruemic
Hey thanks for the pointer. It's definitely a lot smoother using translate.

But I'm running into a hiccup on the implementation. The trick is there are
actually two Norths, they are identical and one is on each end of the
background. Once you hit North-2 on the right end, and you want to keep
turning to the right, it needs to instantly "skip" you back to North-1. And
vice versa.

The thing I haven't figured out how to do in a smooth way is to disable the
transition, for that split second to allow for the jump.

What I've done so far is give each direction a class with the corresponding
translate. eg. "go-0, go-1, go-2, go-3, go-4"

I've also created two extra classes "go-0-instant" and "go-4-instant" which,
set transition duration to 0 and to skips back to North 1 & 2 instantly.

But the problem is that i needs to happen quickly, and once I remove the
"go-0-instant" class and add the class with enacts the normal rotation, the
css gets overridden and the instant translate basically gets overridden.

I guess what I'm after is a clean way to do a callback once you know the DOM
has picked up on a css class change.

I've run into this issue a couple of times before, I would be stoked to learn
of the best way to do this!

Here's the CoffeeScript file that controls the navigation:
[https://github.com/webpop/css-pirate-
ship/blob/translate3d/p...](https://github.com/webpop/css-pirate-
ship/blob/translate3d/public/navigation.coffee)

and the Scss for the cardinal directions: [https://github.com/webpop/css-
pirate-ship/blob/translate3d/p...](https://github.com/webpop/css-pirate-
ship/blob/translate3d/public/pirates.scss#L32)

~~~
jjellyy
Hi,

I think the best way to solve for that is with CSS keyframe animations. lets
say your on the right side of the background and need to cross over -
instantly skip to the left side of the background, and keep moving to the
resting spot on the left.

@include keyframes(right-left) { from { @include transform(
translate3d(-800px, 0px, 0px) ); } 50% { @include transform(
translate3d(-1000px, 0px, 0px) ); } 51% { @include transform( translate3d(0px,
0px, 0px) ); } to { @include transform( translate3d(-200px, 0px, 0px) ); } }

@include keyframes(left-right) { from { @include transform( translate3d(200px,
0px, 0px) ); } 50% { @include transform( translate3d(0px, 0px, 0px) ); } 51% {
@include transform( translate3d(-1000px, 0px, 0px) ); } to { @include
transform( translate3d(-800px, 0px, 0px) ); } }

Basically whats happening is you animation smoothly for the first half, and
then right in the middle you 'reposition' so the second half of the animation
starts on the other side.

Im not sure if you can do 50, 50.1% but 1% over 1-2s should not be noticeable.

If your still getting jitters even with this technique, you could have two
copies of the background side by side and put them in a wrapper div, call it
.slider. then apply the translate on the .slider to cross over the seam, and
when the animation is done instead of letting it rest on the second background
you would set it to rest on the first background but in the same spot, you
would apply this in the 99%, to portion of the keyframe animation.

Basically you can use 50% 51%, 99%,100% technique to shift where the animation
is happening and have it look seamless even though you may be adjusting the
position significantly.

does that make sense ?

------
jamescun
Some instructions on how to use it wouldn't go amiss. (i.e. click the wheel)

~~~
ruemic
Hey, thanks for the feedback, had a couple of other mention this me as well,
saying they kept trying to drag it. I've added a line of directions as you
suggested.

Maybe version 2 will be touch enabled and let you control the wheel to turn to
any degree, not just the cardinal directions :)

~~~
saraid216
My first instinct, after figuring out how to turn, was to try to ram the other
ship.

I was very sad when I realized I couldn't even point myself at it.

~~~
ruemic
Sorry to cause you this great sorrow. And thank you for the ridiculously
awesome suggestion. I've been thinking cannon balls... but keep an eye out for
ramming in V3! I smell a massively multiplayer CSS based naval title on the
horizon ;)

Pull requests welcome, the code is on github <https://github.com/webpop/css-
pirate-ship>

