Working on a game, need coding help!

argh, i have been working on an inbrowser game that can be (hopefully) played in mobile devices. it's not a big production, just an one person project. i'm just using regular html, _javascript and css. however, i am completely stumped at how to make this 3d image carousel, responsive (i.e. content adapts to fit screen regardless of size of browser window, browser type, desktop resolution, or screen size). this is the carousel
www.joezimjs.com...
and this is what i've done with it so far (note that each character menu button below the main window, rotates the selected character to the middle position and information about that character's race is displayed immediately below the character (click image to enlarge)



(more characters are behind the ones you can see and rotate into view when that character's menu button is pressed)

anyway, i really like this carousel script, EXCEPT when i resize the window, the background image resizes correctly, but the carousel does not. the old trick of having every parameter be in percentage or ems, is not working in this example and i can't figure out why. for example, in some cases the width can be set in percentage and in some cases it can't. it stubbornly refuses to be anything but px.

anybody know about this stuff??

erm nevermind. gonna try a different route.

Don't you need to detect detect the browser? I've had a few unexpected things on my dev platform look fine on another browser. I haven't done game developmment outside an Xbox/windows media center and that was just for giggles.

originally posted by: undo
argh, i have been working on an inbrowser game that can be (hopefully) played in mobile devices. it's not a big production, just an one person project. i'm just using regular html, _javascript and css. however, i am completely stumped at how to make this 3d image carousel, responsive (i.e. content adapts to fit screen regardless of size of browser window, browser type, desktop resolution, or screen size). this is the carousel
www.joezimjs.com...
and this is what i've done with it so far (note that each character menu button below the main window, rotates the selected character to the middle position and information about that character's race is displayed immediately below the character (click image to enlarge)



(more characters are behind the ones you can see and rotate into view when that character's menu button is pressed)

anyway, i really like this carousel script, EXCEPT when i resize the window, the background image resizes correctly, but the carousel does not. the old trick of having every parameter be in percentage or ems, is not working in this example and i can't figure out why. for example, in some cases the width can be set in percentage and in some cases it can't. it stubbornly refuses to be anything but px.

anybody know about this stuff??

This may be more helpful for you

btw, I like the art style you are going for.

a reply to: SaturnFX

thanks. my son said: "Mom, make them look like they're holograms." and even though i don't have their transparency set at the moment (you can actually control opacity of an image, right inside the image tag now), that explains why they are all blue-green glowy looking.

this carousel thing is driving me bonkers.

originally posted by: itwork4me
Don't you need to detect detect the browser? I've had a few unexpected things on my dev platform look fine on another browser. I haven't done game developmment outside an Xbox/windows media center and that was just for giggles.

well they have pretty much done away with browser sniffing . responsive design is where you anticipate any possible size screen/browser size by using ratios and padding and so forth in your css styles. i am just accustomed to using percentages. dunno if you remember the "Lorem Ipsum" thing, but it's a similar idea where you fill gaps with padding so that screen looks identical no matter what the browser size is, the screen size or the device (ipads, iphones, tablets, laptops, etc). it could be a huge screen or a tiny one and the layout will scale

html5 is supposed to be system agnostic (should work the same on all types of operating systems).

thought i'd share and introduce you to "Mercurian Female":

mercurians are tall, lithe, and agile. they specialize in alchemy and have an abiding interest in archaeology. they live in bio-dome cities under the surface of mercury, from where they extract chemical ingredients from mercury's mineral composition, for use in alchemical formulae. (their proximity to the sun has caused them to lose normal vision (thus no pupils). as a result, they have enhanced artificial eyes, can see in the dark and into several other spectrums of light. )



---

And here's the "Mercurian Male"



i solved the carousel problem, finally. now i'm working on the "holographic glow" . it's another hurdle since i'm working with an ancient version of paintshop pro. something like after effects, would make it super simple. but i don't have after effects.

painting the flip side of them as well. still a bit of a rough draft. found a nice script to show the opposite side, almost like a 3d rotation but without the side views. i don't have any 3d models for these. strictly 2d atm.


mercurian female (reverse)


mercurian male (reverse)

venusians are of average height, with light blonde hair, sky blue eyes and deep tans. they are obsessed with health and athletics. they specialize in jewelery making and have the gift of healing. they live in pressurized bio-domes under the surface of venus, from where they extract crystals of various kinds for use in jewelry creation and for healing.

venusian female

front (rough draft)



back (rough draft)



male venusian coming up soon.

here's an update on the male mercurian.


it really helps to post these here as i can clearly see where the mistakes are and have more pressure to make them look better. lol

male venusian (rough drafts) pixellation galore

front (dang he looks kinda like luke skywalker)


back (yikes, really rough draft)


updated venusian female

front (doh,keep missing that blue line down the side)


back- updated (and still has funky line. why i can't see these goofs in my graphics software is beyond me but it shows up here nice and clear.