Author Topic: JavaScript - Sprite Object  (Read 2844 times)

0 Members and 1 Guest are viewing this topic.

Offline combatking0

  • JavaScript lives!
  • Senior Member
  • DBF Aficionado
  • ********
  • Posts: 4569
  • Karma: 235
  • Retroman!
    • View Profile
    • Combat King's Barcode Battler Home
JavaScript - Sprite Object
« on: May 03, 2013 »
With the development of the Canvas element, I have started work on a Sprite template. The attachment includes the following files:

sprite.js - the template
StarBlast.htm - a very early version of a SHMUP I'm working on to demonstrate the features of the template

There are also some assorted image files which are used by StarBlast.htm, but these are not part of the template.

This version of sprite.js uses the following constructor:
spriteVar = new sprite("image_file_name",x,y,canvas);

image_file_name is the file name of the image which this sprite will use. GIF, JPG and PNG file types are supported.
x and y are the default position of the sprite on the canvas.
canvas is the reference of the canvas on which this sprite will appear.

Once constructed, the sprite object(s) have the following properties:
x - the horizontal position of the centre of the sprite.
y - the vertical position of the centre of the sprite.
xSpeed - the horizontal speed of the sprite in pixels. (Default = 0)
ySpeed - the vertical speed of the sprite in pixels. (Default = 0)
xScale - the horizontal scale of the sprite as a ratio. (Default = 1)
yScale - the vertical scale of the sprite as a ratio. (Default = 1)
renderX - the left edge of the sprite (Read Only)
renderY - the top edge of the sprite (Read Only)
imageW - the width of the sprite (Read Only)
imageH - the height of the sprite (Read Only)
bearing - the rotation of the sprite in radians. (Default = 0, Range -PI to PI)
alpha - the opacity of the sprite. (Default = 1, Range = 0-1)
canvas - the canvas reference on which the sprite will be drawn.
img - the Image object used to store the image file data.
img.src - the file name of the image.
imageLoaded - the state of the Image object, becomes TRUE if the image file has been loaded into memory.
imageError - the state of the Image object, becomes TRUE if the image file has failed to load into memory.

The sprite objects have the following methods:
setScale(sx,sy) - sets the horizontal (sx) and vertical (sy) scales of the sprite relative to the dimensions of the image file.
move() - updates the x and y properties by adding the xSpeed and ySpeed properties to them.
rotateD(angle) - updates the bearing property by adding the angle argument to it. **Note that the bearing property is stored as Radians, while the angle argument is specified in Degrees, and converted by this method - SLOW**
rotateR(angle) - updates the bearing property by adding the angle argument to it. **Note that this version uses Radians, which is more efficient than rotateD**
getBearing(x,y) - returns the angle of a point relative to the centre of the sprite. (0 is up, 0.5*PI is right, PI is down and -0.5*PI is left)
draw() - draws the sprite image to the canvas while applying rotation, transparency and scaling. **Note that this function will draw a small red square if the image has failed to load**

This template is under development, so please let me know if you feel changes should be made :)

The game itself has a graphical glitch during the explosion.
Use the arrow keys to move and the space bar to fire.
You are our 9001st visitor.
Challenge Trophies Won:

Offline ash

  • ZX 81
  • *
  • Posts: 10
  • Karma: 3
    • View Profile
Re: JavaScript - Sprite Object
« Reply #1 on: May 04, 2013 »
Hey combatking0,

  First thing: Good start. I really appreciate your effort, to write the template.  :)

The API looks promising, to me at-least as clean and minimalist.
This would definitely serve as a good template for quickly writing simple games or any animation too.

just one change i would suggest for now is,
in short,
how about adding rotational velocity.

in long,
for linear motion, you have both position(x, y) and velocity (xSpeed, ySpeed)
for angular motion, there is only the angular position(bearing)
do consider adding something like angular velocity
this would help to easily create sprite that keep rotating by itself, and avoid us giving the angle explicitly in each update cycle as in rotateD(angle).

so far so good,
 :clap: Cheers bro!


ash

Offline combatking0

  • JavaScript lives!
  • Senior Member
  • DBF Aficionado
  • ********
  • Posts: 4569
  • Karma: 235
  • Retroman!
    • View Profile
    • Combat King's Barcode Battler Home
Re: JavaScript - Sprite Object
« Reply #2 on: May 04, 2013 »
Thanks for the feedback. K++ I will add the following properties:

rSpeed - the rotational speed in radians (Default = 0)
gBearing - the angle of the ground under the sprite for use in platform games. (Default = 0)
gSpeed - the ground speed for use in platform games. (Default = 0)
pSpeed - the "physics" speed used in the moveP method. (Default  = 0)
friction - the friction multiplier applied to the pSpeed property by the moveP method. (Default = 1, Range = 0 - 1)
xGravity - the horizontal gravity. Positive pulls to the right, Negative pulls to the left. (Default = 0)
yGravity - the vertical gravity. Positive pulls downwards, Negative pulls upwards. (Default = 0)

And the following methods:

rotate() - adds rSpeed to the bearing property and limits the bearing property to +PI or -PI.
moveP() - Does 4 things:
*1 - applies the friction property to pSpeed property.
*2 - converts and applies the pSpeed and bearing properties to the xSpeed and ySpeed properties.
*3 - applies the xGravity and yGravity properties to the xSpeed and ySpeed properties.
*4 - updates the xPosition and yPosition properties by adding xSpeed and ySpeed to them.
moveG() - Does 3 things:
*1 - applies the friction property to gSpeed property.
*2 - converts and applies the gSpeed and gBearing properties to the xSpeed and ySpeed properties.
*3 - updates the xPosition and yPosition properties by adding xSpeed and ySpeed to them.

To avoid confusion, moveP() would be better for overhead racing games such as "Micro Machines" or space shooters such as "Asteroids". It's only use in platform games would be to apply forces to a sprite in the air.

moveG is better used on platform games similar to "Sonic the Hedgehog" or side-on racing games like "Unirally / Uniracers", but only when the sprite is in contact with the ground.
You are our 9001st visitor.
Challenge Trophies Won:

Offline Jim

  • Founder Member
  • DBF Aficionado
  • ********
  • Posts: 5301
  • Karma: 402
    • View Profile
Re: JavaScript - Sprite Object
« Reply #3 on: May 05, 2013 »
If I were to make one design suggestion, it would be to keep 'things that can move' and 'things I can draw' as different javascript objects.  Lots of things other than sprites can move around.
Jim
Challenge Trophies Won:

Offline Hotshot

  • DBF Aficionado
  • ******
  • Posts: 2114
  • Karma: 91
    • View Profile
Re: JavaScript - Sprite Object
« Reply #4 on: May 05, 2013 »
Good Stuff there CombatKing  :clap:, I had good look at JavaScript Code and it was interesting to look what it does :)

Offline combatking0

  • JavaScript lives!
  • Senior Member
  • DBF Aficionado
  • ********
  • Posts: 4569
  • Karma: 235
  • Retroman!
    • View Profile
    • Combat King's Barcode Battler Home
Re: JavaScript - Sprite Object
« Reply #5 on: May 05, 2013 »
If I were to make one design suggestion, it would be to keep 'things that can move' and 'things I can draw' as different javascript objects.  Lots of things other than sprites can move around.
Jim

To expand, the speed, friction, position and gravity should be one object, and the rotation, rotational velocity, image, scaling and alpha should be in a second object. I will experiment with this split-template approach.
You are our 9001st visitor.
Challenge Trophies Won:

Offline combatking0

  • JavaScript lives!
  • Senior Member
  • DBF Aficionado
  • ********
  • Posts: 4569
  • Karma: 235
  • Retroman!
    • View Profile
    • Combat King's Barcode Battler Home
Re: JavaScript - Sprite Object
« Reply #6 on: May 24, 2013 »
I haven't implemented the changes yet, but the latest test build of the game can be viewed here:
http://www.barcodebattler.co.uk/SORR/SB/StarBlast.htm

Watch out for the Aguileroids at the end of the first (and only) wave of enemies!
You are our 9001st visitor.
Challenge Trophies Won:

Offline ninogenio

  • Pentium
  • *****
  • Posts: 1666
  • Karma: 133
    • View Profile
Re: JavaScript - Sprite Object
« Reply #7 on: June 02, 2013 »
cool test ck!

i played it on the lappy earlyer. it all worked perfect.

just tried it on my phone for fun but obviously control inputs dont work it renders fine though. can it be made too work with touch screens devices?!

it would be a cool feature too implement if possible.

im really tempted by this too have a go at a browser based game! cheers.
« Last Edit: June 02, 2013 by ninogenio »
Challenge Trophies Won:

Offline combatking0

  • JavaScript lives!
  • Senior Member
  • DBF Aficionado
  • ********
  • Posts: 4569
  • Karma: 235
  • Retroman!
    • View Profile
    • Combat King's Barcode Battler Home
Re: JavaScript - Sprite Object
« Reply #8 on: June 03, 2013 »
Thanks Nino,

I can't implement multi-touch, but I could make a mouse-controlled edition which would be single touch compatible.
The ship would then move towards the touched section. I'll have to figure out how to make it shoot, as the initial firing rate will be slower than it is in this test - rapid fire will be achieved through a power-up.

I'm still working on the sprite object, trying to make all of the features work. Splitting it into a draw / action pair of objects and deciding which features to put where is tricky, but a browser based game is definitely worth a try. I'm learning loads of new techniques which I plan to use in future demos.
You are our 9001st visitor.
Challenge Trophies Won:

Offline Clanky

  • Laser Guided Memories
  • Amiga 1200
  • ****
  • Posts: 340
  • Karma: 16
  • kiss that sound that pounds your senses
    • View Profile
    • Facebook
Re: JavaScript - Sprite Object
« Reply #9 on: June 20, 2013 »
Re: I can't implement multi-touch, but I could make a mouse-controlled edition which would be single touch compatible.

W3C are reviewing a specification of a Pointer Event, which was submitted by a team at Microsoft and Mozilla (at least I think so..).
Quote from: W3CSubmission
A pointer can be any point of contact on the screen made by a mouse cursor, pen, touch (including multi-touch), or other pointing input device

Pointer Events
W3C Candidate Recommendation 09 May 2013
http://www.w3.org/TR/pointerevents/

And a nice little read;
http://blogs.msdn.com/b/davrous/archive/2013/02/20/handling-touch-in-your-html5-apps-thanks-to-the-pointer-events-of-ie10-and-windows-8.aspx
He tilts, and his eyes are focused on the ground far below.. Wind? Angels? Men..

Offline combatking0

  • JavaScript lives!
  • Senior Member
  • DBF Aficionado
  • ********
  • Posts: 4569
  • Karma: 235
  • Retroman!
    • View Profile
    • Combat King's Barcode Battler Home
Re: JavaScript - Sprite Object
« Reply #10 on: June 20, 2013 »
Sounds good for multiplayer :)

K++ for the heads-up.
You are our 9001st visitor.
Challenge Trophies Won: