First thank you for reading and in advanced for answering.
I am in the process of creating a message board based canine role-playing game. I'm researching and practicing and creating first drafts. So far I have everything I need for the map, forum, front end. I'm using html, css, js, and php. I have hosting with a database and I've been able to successfully create a database, call and input data.
So the part I'm stuck with trying to learn is the character creation page. I want users to be able to customize an image of a canine I've drawn by choosing a base coat color, eye color, and skin color from a drop down each and then that reflect on the image. Then to be able to further make the canine unique by adding markings. I've explored SVGs and it's just not what I want to do, unless it's the only way? But I still don't understand how to make the dropdown and adding/changing opacity of layer (marking) reflect on the image and save as a new image to the website.
So in short, can someone point me in the direction or show me a small example on how to make dropdowns and adding layers to reflect on an image? I really really hope this makes sense!
Related
Hello dear StackOverflow's community!
This is my very first question on the site, so I hope I'll be clear enough. Also, I am a French guy and I apologize in advance for the language mistakes!
Let me explain my situation (I like to be precise so it will be a bit long) :
I am currently doing an internship in my University. Here's the topic : my teacher made a 2D serious game based on image processing, where each player (4 maximum) must replace the right colors on each part of an animal. She used the XNA framework of Visual Studio to do it.
My task is to develop a new version of this game using Javascript technologies, particularly Pixi.js.
The game works like this : the main Container of the application is separated in 4 areas, one per player ; each of these areas sets its background using a Sprite that I create from the grey-scaled image of the animal the player chosed. At the center of the screen is a color palette represented by an array of Sprites. From this I can drag n' drop a color to the animal Sprite, and the region that represents a part of its body detects the drop. Everything works fine until here, but this is the point where I encounter difficulties.
I would like to change the tint of only the pixels corresponding to this region. The positions of these pixels are registered in an array I create from a text file, that's how I can detect which region receives the color.
I already tried to use a Graphics object from Pixi to redraw the color above the Sprite, but it is extremely slow. I also tried to use Filter, but since I want to color only some pixels and not the entire Sprite, I need to pass (using uniforms) the array of positions to my WebGL shader to make it verify for each pixel if it is part of the ones I want to change. But the shader needs me to declare this array indicating its size. I cannot do that because every region has a different number of pixels.
I am blocked now, and I don't know how to perform what I want...
Is there any solution that does not imply separating my image in several Sprites? I think it would work but if there can be another way, allowing me to avoid this, I would be very thankful!
Thanks in advance, and sorry that this message is so long!
I don't really know what im searching for even after googling all sorts and wondered if someone could put me in the right direction.
Lets base this example on a car frame.
I would like to have one image of a car frame which allows to have multiple colours (Hex), so when a user selects black, the main car colour is black but the shape/frame of the car remains with the same image, selecting red would change the colour but would keep the same frame image.
The reason why i would like to have one image is, because there could be 50-60 cars all with around 20-30 different colours. So uploading that many images would consume a lot of disk space over time.
Any components/frameworks i could use with an ASP net project?
Either client side Html and Javascript:
You could do this efficiently by creating a partially transparent image I guess. Then change the background color of the element below the image using script. It depends on the type of picture and quality of the output if this is an option for you.
A better approach would be to change the color of pixels directly. Look for Html5 canvas pixel manipulation or use this link: Pixel manipulation with canvas. Scroll down to the Grayscale sample to start with.
Or server side C#:
Use image filters/direct pixel manipulation. Look for "Pixel Manipulation in C#" to find the right libs and API for your project and framework e.g. WriteableBitmapEx. More choices here: .NET Core Image Processing.
I am learning to develop mobile applications, quite in the initial phase.
This query is not related to mobile but more to html/css/js.(for
I intend to make a simple game, where a picture is seen, a few options are available and the user can drag and drop these options onto the image.
eg. There is an image of a plant > options are #leaf #stem #flower #bud
The user must drag and drop the correct option to the correct place on the image to get points. i.e Drag the #leaf option onto the leaf of the plant.
Now my problem is the image, the separation of these points, I can't figure out how to do it.
Query in short: How do I access separate points/sections on a single image in html/js for above purpose?
Query (longer version)
I did a little search and realised I can slice the image and recreate it using multiple images, I tried this, it sort of works but it has a a lot of drawbacks:
1)More images mean more space, combined size of the split images was about 1.5x the original image(this is just splitting it into 4 images)
2)For a complex picture, the number of images to slice into is large and hard to manage in css(n00b==me) as they don't just need to be split into a simple X*Y grid but a much more complex split depending on the object in the image.(realised when I was trying to do a simple cell structure img)
3)More images also means more http requests(in case the app is WebView based) which will increase loading time.
It just seemed liked too much of a hassle, there must be a better way.
Then I saw css sprites , I dont need to combine my images like sprites are intended for, rather the reverse. Just access parts of my pre-existing image, as separate objects.I haven't tried this(working on it) and and I haven't seen this being done either, or maybe its being done and I'm not seeing.
Please help guys, my problem is quite simple(I think) , I think I'm just not getting the correct google search terms.
If anybody has any ideas,links, resources and also any clarifications as I may not have put up my problem as clearly as I'd like to, please do reply.
regards,
Rahul Agarwal
You could try to place transparent divs over the main image using absolute position and fixed dimensions. Those divs will be assosiated to the possible options, and when a user drops an option over some specific div, you'll know what points to give.
Little demo using two divs and an animated scaling to show that the positioned divs will scale according to their parent:
http://jsfiddle.net/VK3A8/
fiddel with image:
http://jsfiddle.net/8qLFc/4/
I have a simple problem in my mind but can't figure out where to start and JS isn't my strongest front. The JavaScript part is what gives me troubles.
I have an uploaded image which I want to drag my mouse upon to make a rectangle and get the rectangle coordinates. Those coordinates should go into my Rails app db so that this rectangle is latter displayed to the user and the image part that is selected will be zoomed to the user.
I've gone through several jQuery plugins that do tagging on images but first of all they are too complex for my needs and can't be customizable to this specific need of mine.
In order to get a real live example please see this http://www.stylebistro.com/lookbook/Tops/PJfJzgo2fN9
It is essentially what I want to achieve but the administration part is giving me troubles.
Regards,
Yavor
jCrop has an API that returns image coordinates. It can zoom the image as well, so it should be a good fit.
I'm seeing in another forum if the best way to do this is with Javascript or Ajax but I'm wondering if there is an even easier simpler way. I'm trying to create a web service where users can check which countries they have visited from a list of 175 or so and a World map image would then instantly update with a filled color.
There are other similar services, but I'm envisioning mine to be both updating from checks in checkboxes and by clicking on the target country in the displayed image say with an imagemap. Additionally other solutions display all the visited countries in the same color. I would like different colors for different countries or at least for those countries that touch. Eventually I would like to include a feature that enables the choice of which colors to assign countries.
I found a Sourceforge project called pwmfccd. It's simply an open source image of the world and the coordinates on the PNG image for all the countries. You can use mogrify from ImageMagick and floodfill to fill the countries with color. I have done this successfully, locally with batch files.
My ISP has told me where mogrify is located, basically "/usr/bin/mogrify". I now have a horrendously complicated cgi script which if it worked is set to redraw the world map image with each checkbox. It's here. It also redraws the whole web page with each check. The web page starts here. Of course this is not at all efficient, and I think probably the real way to go is Ajax or Javascript, so that maybe just the image gets changed and redrawn, not the whole web page. Sorry I don't even know the difference between Javascript and Ajax and their relative merits at this point.
I suppose you could make just one part of the image update with each check or click on the image instead of even just the image redrawing, but I have never even heard of a hint at being able to do that for irregularly shaped image elements like countries. So I guess an Image map and sister checkbox entries tied to mogrify events redrawing the user's personal copy of the image with an image refresh would be the only way to go.
So how do you do this with something other than Javascript or Ajax or is that definitely the way to go and if so, how would you do it? Or can you after all cut up a web based image into irregular puzzle shaped piece which you can redraw individually at will.
Thanks in advance for reading and considering answering this post.
Well, it looks like maybe my hosting company only supports using PHP with ImageMagick. At least I know better what to try create. I'm completely new to PHP, but I guess that is alright