Rotate, skew, resize for DHTML game

[Nik Coughlin]

Are there methods for manipulating images in JavaScript that would allow me
to write functions to rotate, skew, mask and resize images (bitmaps)?

The functions need to be fast enough for use in a top-down scrolling game.
Or would I be better off preprocessing all of the images with something
server side such as PHP and then preloading them into my JavaScript already
manipulated?

The only thing I don't like about the idea of preprocessing the images is
that I will have to preload a very large number of images, ie all of the
sprites rotated at different angles, resized at different sizes etc.

I am considering using Flash but because it would involve learning
ActionScript I would prefer to do it with a combination of JavaScript and
PHP. The other alternative that I was considering was using SVG, but not
many people have an SVG capable browser or have downloaded the SVG plugin.

Would also appreciate any links to resources that would help me with this
sort of thing. TIA!

 

[Randy Webb]

Are there methods for manipulating images in JavaScript that would allow me
to write functions to rotate, skew, mask and resize images (bitmaps)?

No. JS has no ability to turn, rotate or otherwise manipulate images :-\
I wish it did...

 

[J. J. Cale]

I am not promoting Microsloth or any of it's products but...
AFAIK IE5.5 alows images and text to be rotated skewed and resized through
the filter and style objects
for resizing
currEl.style.zoom=var+'%';
for rotation
var deg2radians = Math.PI * 2 / 360;
currEl.style.filter="progidXImageTransform.Microsoft.Matrix(sizingMethod='
auto expand')";
// I use onmousemove to trap event.clientX/Y to produce 'rotation' values
so the user can rotate or skew with a mouse drag
document.onmouseover=makeRotationParam;
var lastX=0, lastY=0;
function makeRotationParam() {
var x=event.clientX, y=event.clientY;
var aValue=compute differences in current and last mouse position
according to your needs;
lastX=x;
lastY=y;
rotateObj(aValue);
}
function rotateObj(rotation) {
if(rotation>=360) rotation=0;
var rad = rotation * deg2radians ;
var costheta = Math.cos(rad);
var sintheta = Math.sin(rad);
currEl.filters.item(0).M11 = costheta;
currEl.filters.item(0).M12 = -sintheta;
currEl.filters.item(0).M21 = sintheta;
currEl.filters.item(0).M22 = costheta;
}
and if you fiddle with the filter params (M11...) and/or the rad/sin/cos
values you'll find the skew and more
Jimbo

 

[Dr John Stockton]

JRS: In article <[email protected]>, dated Mon, 6 Sep 2004
09:24:40, seen in J. J. Cale

var deg2radians = Math.PI * 2 / 360;

Math.Pi / 180 // more elegant

if(rotation>=360) rotation=0;

rotation %= 360 // should be much better, in the general case.


Responses should go after trimmed quotes, and sigs should only be quoted
if cited. Please read the newsgroup FAQ.

 

[Ian Sedwell]

Hi Nik

You can't do this in JavaScript, but you can use JavaScript to call Java and
Java can do it. If you can get hold of J.A.Pew "Instant Java" (ISBN
0-13-565821-7), then you will find that the book comes with a CD on which
the necessary Java applets are already provided in such a way that you can
use them with getting your hands dirty. And if you can only get a
second-hand copy with the CD missing, it still has all the source code you
need.

All the best

Ian

 

[Jim Ley]

You can't do this in JavaScript, but you can use JavaScript to call Java and
Java can do it. If you can get hold of J.A.Pew "Instant Java" (ISBN
0-13-565821-7), then you will find that the book comes with a CD on which
the necessary Java applets are already provided in such a way that you can
use them with getting your hands dirty. And if you can only get a
second-hand copy with the CD missing, it still has all the source code you
need.

SVG, DirectAnimation and VML are also all more than capable of doing
it, I would recommend SVG as the most future proof and cross-platform,
and Directanimation as the most supported (every win32 IE since IE4)

Jim.

 

[J. J. Cale]

Sorry
document.onmousemove is what I meant;

I am not promoting Microsloth or any of it's products but...
AFAIK IE5.5 alows images and text to be rotated skewed and resized through
the filter and style objects
for resizing
currEl.style.zoom=var+'%';
for rotation
var deg2radians = Math.PI * 2 / 360;
currEl.style.filter="progidXImageTransform.Microsoft.Matrix(sizingMethod='
auto expand')";
// I use onmousemove to trap event.clientX/Y to produce 'rotation' values
so the user can rotate or skew with a mouse drag
document.onmouseover=makeRotationParam;
var lastX=0, lastY=0;
function makeRotationParam() {
var x=event.clientX, y=event.clientY;
var aValue=compute differences in current and last mouse position
according to your needs;
lastX=x;
lastY=y;
rotateObj(aValue);
}
function rotateObj(rotation) {
if(rotation>=360) rotation=0;
var rad = rotation * deg2radians ;
var costheta = Math.cos(rad);
var sintheta = Math.sin(rad);
currEl.filters.item(0).M11 = costheta;
currEl.filters.item(0).M12 = -sintheta;
currEl.filters.item(0).M21 = sintheta;
currEl.filters.item(0).M22 = costheta;
}
and if you fiddle with the filter params (M11...) and/or the rad/sin/cos
values you'll find the skew and more
Jimbo
allow

 

[Nik Coughin]

Core Java will read .png, .gif and .jpeg,
but to read .bmp it would require JAI.
<http://java.sun.com/products/java-media/jai/whatis.html#function>

Of course .bmp's (if that is what the OP
meant by bitmaps) are a bad format to use
on the net in any case. Gif are good for
256 color images, while jpeg is good for
natural images. Use png for everything else.

Don't worry, I wouldn't dream of using bmps on the net. Also, there are
many instances where png is more efficient than gif for 256 color images. I
am looking for a pure JavaScript solution, so I will probably preprocess all
of the images in PHP and load them into the JavaScript already transformed.
Just means that I'm going to have a big preload time.

 

[Ian Sedwell]

Don't worry, I wouldn't dream of using bmps on the net. Also, there are
many instances where png is more efficient than gif for 256 color images. I
am looking for a pure JavaScript solution, so I will probably preprocess all
of the images in PHP and load them into the JavaScript already transformed.
Just means that I'm going to have a big preload time.

I'm a bit uneasy about the notion of long pre-load times. Users can get
mighty impatient I think you'll find Java will be quicker. Also, I am
assuming from what you have described that the image manipulations are
preset. For example, all images are in a "normal" state and also in, say, a
rotated 45° state. But what if your game evolves and you want the user to
select an arbitrary rotation by some means? You'd have to modify your PHP
and incur yet another download. Java can do it all locally much quicker than
it would take to perform the request upload / image manipulation on the
server / modified image download cycle.

 

[Nik Coughin]

I'm a bit uneasy about the notion of long pre-load times. Users can
get mighty impatient I think you'll find Java will be quicker.
Also, I am assuming from what you have described that the image
manipulations are preset. For example, all images are in a "normal"
state and also in, say, a rotated 45° state. But what if your game
evolves and you want the user to select an arbitrary rotation by some
means? You'd have to modify your PHP and incur yet another download.
Java can do it all locally much quicker than it would take to perform
the request upload / image manipulation on the server / modified
image download cycle.

Just occurred to me, doing it purely in Java would mean better support for
mobile devices, yeah? The whole reason I want to make a browser based game
is in order to have it run on as many platforms as possible. I have a
feeling that most mobile browsers don't implement JavaScript, though I
haven't had a chance to look into this yet.

 

[Jim Ley]

Just occurred to me, doing it purely in Java would mean better support for
mobile devices, yeah?

Not really, mobile edition java is a different beast, and applet
support in mobile browsers isn't there.

I have a
feeling that most mobile browsers don't implement JavaScript, though I
haven't had a chance to look into this yet.

Nope plenty of javascript support on mobile devices, of course the
rotate etc. discussed earlier in the thread doesn't work.

Jim.

 

[Nik Coughin]

Not really, mobile edition java is a different beast, and applet
support in mobile browsers isn't there.


Nope plenty of javascript support on mobile devices, of course the
rotate etc. discussed earlier in the thread doesn't work.

Jim.

So JavaScript support is OK on mobile devices, but applet support isn't
there? Additionally, it's mobile Java and therefore a subset of Java, or
different altogether? Looks like it's back to preprocessing images with PHP
and big preload times then. You mentioned SVG, I've played with it a
little, how is support for mobile devices (I would imagine non-existent but
would love to be proven wrong)?

So, in summary:

1) JS with M$ only image filters, only works in IE therefore not an option.
2) JS, but preprocess all of the images with PHP, means big pre-load time
BUT allows me to use GD, ImageMagick etc. Best cross-platform solution,
easiest to implement, no learning curve, but load time is a major issue.
3) Use JS to call Java for image transformations, good cross-platform
support overall but inadequate support for mobile platforms.
4) Use SVG, generally requires a plug-in, I have no idea about support on
mobile devices but imagine that it's not good yet? Trivial learning curve.
5) DirectAnimation, M$ proprietary, same issue as 1).
6) VML, what level of support? I have no idea about this, haven't looked at
it for years.

Would really like some advice on the best technology to use in order to get
the widest support possible. At the moment I am leaning towards
HTML/CSS/JS.

 

[Ian Sedwell]

Jim's absolutely correct, but I still think Java is your best route for the
resolution of your immediate problem. Of course none of us really know how
quickly the capability of mobile browsers will expand. I would bet on them
being able to do what you hope, but not on when.

 

[Jim Ley]

Looks like it's back to preprocessing images with PHP
and big preload times then.

Yes, that is the only solution, with this strange precondition about
mobile browsers. you're writing a game in HTML, that you intend to
work in a web-browser on both a tiny mobile phone screen, and a
web-browser screen, it's pretty unlikely any game is gonna work
logically on the two devices.

You mentioned SVG, I've played with it a
little, how is support for mobile devices (I would imagine non-existent but
would love to be proven wrong)?

SVG support on mobile devices is very good, lots of phones ship with
it now, and even more will once it becomes a core requirement of
vodaphone (October).

2) JS, but preprocess all of the images with PHP, means big pre-load time
BUT allows me to use GD, ImageMagick etc. Best cross-platform solution,
easiest to implement, no learning curve, but load time is a major issue.

Even this is going to be difficult, you've not explained remotely what
you're doing, but these mobile browsers JS implementations aren't
particularly up there for doing game like things.

6) VML, what level of support? I have no idea about this, haven't looked at
it for years.

It's IE5+ only, and behaviour implemented so troublesome in XP SP2

Jim.

 

[Nik Coughin]

Yes, that is the only solution, with this strange precondition about
mobile browsers. you're writing a game in HTML, that you intend to
work in a web-browser on both a tiny mobile phone screen, and a
web-browser screen, it's pretty unlikely any game is gonna work
logically on the two devices.

Tile-based scrolling engine with a base of 48 pixels, so should be able to
get a viewport of at least a few tiles wide by a few tiles high on most
mobile devices.

SVG support on mobile devices is very good, lots of phones ship with
it now, and even more will once it becomes a core requirement of
vodaphone (October).

Will seriously consider it. SVG has some very cool features, I like it a
lot.

Even this is going to be difficult, you've not explained remotely what
you're doing, but these mobile browsers JS implementations aren't
particularly up there for doing game like things.

I only really need DOM support, so I can preload images and move them
around. DHTML Lemmings seems to run fairly well, have you seen it?
Admittedly I haven't seen it running on a mobile device.

http://193.151.73.87/games/lemmings/index.html

It's IE5+ only, and behaviour implemented so troublesome in XP SP2

Won't even bother looking into it then.

 

[Thomas 'PointedEars' Lahn]

On 2004/09/06 21:22, in article SF3%[email protected],
"Nik Coughin" <[email protected]> wrote:

Please do not write attribution novels by replicating header information.

I am looking for a pure JavaScript solution, so I will probably
preprocess all of the images in PHP and load them into the JavaScript
already transformed. Just means that I'm going to have a big preload
time.

I'm a bit uneasy about the notion of long pre-load times. Users can get
mighty impatient I think you'll find Java will be quicker. [...]

You're wrong, it takes much more time to start an (external) Java Virtual
Machine than to invoke a (built-in and maybe already running) script
engine. Your JVM may be started when you log on, but mine[tm] is not.


PointedEars

 

[Dr John Stockton]

JRS: In article <[email protected]>, dated Sat, 11 Sep
2004 19:20:21, seen in Thomas 'PointedEars'

Please do not write attribution novels by replicating header information.

Ignore him.

For current thinking on this matter, current thinking is visible in
work-in-progress
http://www.ietf.org/internet-drafts/draft-ietf-usefor-useage-00.txt
and
http://www.ietf.org/internet-drafts/draft-ietf-usefor-article-13.txt

See also the references via sig line 2 below; unlike TL, TS is a
respected authority.

Lahn has not noticed that the need to correct his misguided and
dictatorial statements used more resources than reducing attributions
could possibly save, even ignoring the utility to many of us of having
fuller attributions. The situation is in fact not unlike that of his
ancestors two-thirds of a century ago (and 90%, too)