Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I'm looking for a way to make a 3D model viewer for my site using Javascript and the canvas element. Something like on this page:
http://minecraftbr.com/novaskin/
You can see the model (the Minecraft guy) is shown and you can rotate and move him. What also needs to happen is a particular skin applied to the model. For example, each minecraft skins looks something like this:
http://i.stack.imgur.com/AiBnl.png
And it is then mapped onto the minecraft guy, to look like this:
http://minecraftbr.com/novaskin/#http://imgur.com/AiBnl.png
To be honest it seems like pretty easy pixel reading and then just applying the correct colour. What I'd really need help with is the 3D aspect of this, like the polygons for the head, body, arms, legs etc.
Is there a decent Javascript library for doing this kind of stuff? Something that can make it easy to use 3D polygons and stuff in the canvas element.
Help is appreciated, cheers.
I've made something like this and it's on my website, it's made with Canvas and CSS3 mainly. It will load in the username of a minecraft player and use their skin. I added basic ability to view on iPad/iPhone etc so you can turn the device and the model will move, as if you are moving the camera. The link is
mjstk.co.uk/dev/minechar/
or for loading in a skin of a custom user (you could upload/drag n drop new skins on if you wanted to add that)
mjstk.co.uk/dev/minechar/#minecraftusername
mjstk.co.uk/dev/minechar/#hugosslade (is mine)
If you are looking to do it completely in canvas though, I'd recommend three.js; While it does have support for WebGL, it also can utilise canvas (as well as other things)
Hope that was helpful
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I want to show a simple custom floor-plan in my Android app, something similar to the image below:
The target is to colour the area where I am currently in (I get this info in my app):
It would be perfect if each of these areas are also clickable to set an onclicklistener or similar and be able to zoom in/out as with images.
The main restriction is I want everything local, that is, no connection to an internet service to import the image.
I have tried loading an html which contains an svg floor-plan, but I don't know how to change the colour of an area from Android when I move from one area to another.
How can I approach this?
You can create a simple html page within a WebView and attach the SVG and add Javascript, so when tapping on the some elements in the svg to call a javascript function. You can then sent the events to the native java code in your android app if your app is native or just handle it in the html.
I believe this article is especially for your question Interfacing with SVG
you'r floor looks a lot like a grid layout!! why are you doing so much work to achieve something very simple? what you need to do is dynamically create a grid layout then put other views in it
This is a very open-ended question. It's also not simple.
You're going to have to do a lot of low-level coding to achieve what you outlined. No matter the case, you're going to have to find a way to turn that SVG into something that can be interacted with. The limiting factor here is that you're using SVGs--that's not a data format, it's vector. Unless you parse SVG into something more usable for a UI, or can get this data in a different format (some form of parsed JSON?), you're just showing an image.
Now assuming you do find a way to get this data more accessibly, you could go down the path of a custom view and overriding the draw(). Then you could just draw out your rooms and positions where you want, add a TouchListener, add a drawing state machine, etc. Alternatively to the View.draw(), you could use an GLSurfaceView and draw with hardware language.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
At work, I am developing this "mystery"-type (2D) game where users go around rooms/location, tap on objects (objects/items/people) and get some form of feedback like a message, a chat (think RPG chat) or finding some item.
Technology used currently
Currently its developed using pure HTML/CSS, where everything is a div. Animations uses CSS3 Animations or jQuery ones depending on suitability. Chats implemented using simple buttons (on click, depending on reply do something). There is panning of the game stage involved - the viewable area is smaller than the actual game stage. So users will drag the stage around by tapping and drag.
The problem
Details here are not really important ... you may want to just scan through this section if you prefer
The most problematic part with this is performance. On a mobile device, its terribly jerky for a simple 2D game like this. Taps are not really responsive, sometimes requires more taps to register. We already tried to use CSS animations and transforms where possible.
The 2nd problem is debugging. Since this game is played on the client's app, which embeds own game in an in app browser/webview. Debugging is made more complicated (no Chrome usb/remote debugging, currently we use Firebug Lite - which is a pain and lacking in features ...). Performance also suffers further. There seem to be weird bugs also like jQuery animation callbacks running at the wrong time. Views scrolling unexpectedly. Sometimes the tap area of the objects are off the actual object - when the user pans the stage, the graphics move as expected, but the tap area is off the object - eg. tapping on the right of an object triggers it, but not tapping on the object (this happens on some devices of a particular brand)
Any recommendations?
For such a type of game, is a game engine suitable? Which one? Most I see are more for more complex games and maybe overkill to include.
Might using HTML5 canvas solve my graphical performance issues? Another game was developed using ImpactJS, its of a different kind, and the performance is considered ok. But with this chat and tap (to interact) based game, I wonder if such a large framework is actually required.
The problem with the taps is that phones handle clicks different than touches: for each click there is a delay (300ms, if I'm not mistaken) during which it waits to see if the user performs a double-click. That's usually where most of the sluggishness on the mobile devices comes from.
You never described which part exactly is causing the game to perform badly. If you have tons of elements on screen, each with their own CSS (and especially CSS like shadows, animations...) it will likely slow your game down.
Using canvas (and dropping jQuery to squeeze out maximum performance from the app) might be a good idea here. Without any huge frameworks/engines. Using canvas will also help you with the issues you described under debugging - while you won't be able to inspect every element on canvas, things like displaced objects/click areas won't be happening as everything (except chat - I strongly suggest you don't render text on canvas because it's very slow) is located in a single element and all the layering will happen on the canvas itself, not CSS.
But don't forget: while a well-designed canvas app might definitely outperform what you currently have, it can also perform worse if done badly.
It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 10 years ago.
I've made this little rpg ruby game I did while learning and now I'd like to make it into a browser game. I've already set up Sinatra framework to serve it, so what I am looking for, before everything else, is a way to represent the game map in browser (location attributes are stored in db).
The map does not need to refresh or be dynamically fetched as you scroll it, (at least at this stage of development) but, a technology which would allow me to do so in future would be a good reason for choosing it.
Things that I thought of: html tables, html5 canvas, some js framework which is designed exactly with this purpose (which I do not know of = please advice).
Yes I know about gamequery-js framework, but I've never used it, and I don't know if it's going to slow down everything down to inusability as I'm adding new features (scrolling, ajax).
I really don't know of any other alternatives.. maybe there are lighter approaches? Easier or more minimalistic ways ? More targeted js framework which is the right tool for the job? Maybe just some html canvas code, or even simple image maps, or images with absolute positioning will be enough?
The thing is I'd like to start simple, and then gradually make it better, so, as I said before, I'd prefer something that will give me room for improvement or is headed toward new web tendencies but which will also give me a bit of gratification in the beginning :)
So.. advices are needed! And appreciated! :)
Thanks
p.s. Flash is excluded because I don't like it.
edit: adding more techical details to better describe the map as charlietfl commented it as being too vague to give a good answer:
A new map is randomly generated by code for each new game at game start.
For now forget db, and let's say a map (say 100x100 "squares") is stored as a tridimensional array. (x,y, ...)
Last "dimension" of array stores who & what is at that map cell: a player, a building, whatever.
So all I have to do is render those "squares" or array cells to a 2d tiled map in the browser.
Hope that explains it better!
Depending on how your terrain looks the simplest would probably just absolutely positioned images. This works especially well if your maps have a standard, tiled background. You can just use plain CSS to render the background then place terrain elements where necessary.
If you want to be fancy you can also simulate isometric projection by translating your world coordinates to HTML coordinates with a function that shifts the x coordinates along the y axis. Actually, that's not even really necessary with clever sprite and map designs.
Do Try KineticJS, http://kineticjs.com/
According to its site,
KineticJS is an HTML5 Canvas JavaScript framework that extends the 2d
context by enabling high performance event detection for desktop and
mobile applications.
You can draw things on the stage and then add event listeners to them,
move them, scale them, and rotate them independently from other shapes
to support high performance animations and transitions.
To learn kinetic js please look at http://www.html5canvastutorials.com/
Hope this helps.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 9 years ago.
Improve this question
I want to build an image scroller that works like google map. When the website first loads, there will be a viewing box in the middle of the page that contains part of an image. A user can click and drag the image, that is scrolling, to inspect other areas of the image. If the user happens to scroll beyond the perimeter of the image, the box will load an adjacent image. I also want to overlay these images with markers that the user can click on to zoom in for more details.
Is there a library that does what I want already? Or something close to what I want so that I can start to customize it? Or if I have to build from scratch, any suggestions on the general approach to take?
I like using jquery library, so anything built with jquery would be awesome.
I don't think this does everything you're looking for, but might be a good place to start: SpryMap
Take a look at the Overscroll jQuery plugin.
I've used OpenLayers for projects similar to this and it works great!
Not based on jQuery though.
It provides free maps but you can have your own images as well.
Just for some design ideas to take into account when writing/finding your solution:
There are two ways of doing this, one with multiple chopped up images that preload when the user scrolls near them, and the other which is simpler and loads one big image.
If your image(s) are very big, you should opt for a solution that preloads segments as this will be a lot more user friendly if you can do it seamlessly.
The big image will slow down some computers/mobile devices significantly!
If you built something yourself, it probably couldn't be pure jQuery. You'd want to write a server script that either processes your big images into segments that you cache, or serves segments on the fly. That's the point at which you could start using jQuery to control what gets loaded ans when.
I think CraftMap seems to provide what you are asking for. But I'm unsure if it supports zooming.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I know object oriented PHP and Java, and I can code Javascript fairly well at the moment.
However for the life of me I'm not sure how Google's made a game in JavaScript.
It seems to be compressed (the code) so I can't really see what's going on.
I thought javascript it was only single threaded too, making game development even harder.
I've seen the GWT, but I thought that was more for designing interfaces, I didn't really see any game development in there. If someone could direct me to some sort of toolkit, or open my eyes to how people are coding games in Javascript, I sure would appreciate it!
Google (if you are thinking of the pacman game), used HTML5's new feature which supports a kind of 'threading' called WebWorkers. You can also use timeouts and such to pretend to be using threads, though in reality they aren't.
Writing a game in Javascript is similar to how you would do it in C. Or rather, messy C with most things in one file. You have to just define all your components in the one javascript file (or multiple if you are using WebWorkers) and press your go button. Graphics are largely done with HTML5's canvas 2d element or if you are really on edge, the canvas 3d WebGL system which isn't really supported properly in all modern browsers yet.
In fact, you can make a game simply by setting up one big Canvas 100% width and height, and then program your entire system in that javascript file, ignoring the fact that you are on the web (if you please). Most usual drawing, threading, database, networking, etc... standard game 'features' are already built in to the latest HTML 5 spec.
This SO question on a javascript games framework should help and google turned up gameQuery and GameJS...that should at least provide some insight into what's being done.
This site also has a gallery of javascript based games...
It's really hard to make complicated game in Javascript now, mostly because of browsers incompatibility. But google guys made port of quake 2 to Javascript with GWT.
To make your own game you can use HTML5 canvas or better vector graphic (VML for IEs and SVG for others) maybe with raphael.js library as abstraction layer. Also you can use some physics engine like Box2DJS
3D Javascript game is not an option now, because WebGL is under development.