Image with text fields? (is this easy programming)?

Are you talking about a web page? A custom program? A magical parchment?

"Images" generally implies static visual content. Overlaying a text field on top of an image is pretty easy (in most design toolkits). Is that what you mean?

well the simplest way is to treat the text as an image, create a larger image representing the entire area that the text and images exist on and draw each object. Of course this all sounds very simple to an experienced programmer but I recognize some people may have trouble so i'll try to break it down a bit more for you

1) a glyph is the description of a character so it would have an x and y origin and an x and y extent (xorigin+width and yorigin+height)
2) the glyph would also contain a series of points with their position within the glyph (again x and y) and intensity, because if all points had the same intensity it could only represent a solid block or empty block, which would result in aliasing (blocky text)
3) once you have these points and have created a texture that is the size of the glyph, you can set each pixel to the value of the color you wish it to be with alpha multiplied by the intensity from the point (this will create anti-aliased text that is transparent and most computers now support rgba colours)
4) work out how large each entire piece of text is and draw each glyph in the text
5) draw the text and images onto the larger image

N.B. every object will have a display rectangle, so text, images, characters (which make up text) and the drawing area can all be described and should use a rectangle to descirbe their position and extent

@ApochPiQ, seriously the old addage "if you cannot say anything helpful, be silent!" springs to mind because mocking someone and then telling them what they want to do is trivial helps no-one

What are you trying to make this game in? web-based?

@ApochPiQ, seriously the old addage "if you cannot say anything helpful, be silent!" springs to mind because mocking someone and then telling them what they want to do is trivial helps no-one

To me it comes across as "Trying to understand the question more fully", rather than mocking. Good questions get better answers, ApochPiQ seems to be trying to get a better question.

Are you talking about a web page? A custom program? A magical parchment?

"Images" generally implies static visual content. Overlaying a text field on top of an image is pretty easy (in most design toolkits). Is that what you mean?

What are you trying to make this game in? web-based?

[quote name='Lewis_1986' timestamp='1314782344' post='4855801']
@ApochPiQ, seriously the old addage "if you cannot say anything helpful, be silent!" springs to mind because mocking someone and then telling them what they want to do is trivial helps no-one

To me it comes across as "Trying to understand the question more fully", rather than mocking. Good questions get better answers, ApochPiQ seems to be trying to get a better question.
[/quote]

Seriously I hope I'm wrong but I cannot see why someone would take that mode of reply as a probe for more information? If it was a genuine probe I do apologise, but as an educator I see alot of people quitting very early on, simply because they do not understand a concept and when they ask a question the response stifles their interest.

Also I do not see that it matters how the system of compositing would be implemented. Unless there is a system out there that uses elliptical co-ordinates, the basis is the same... html, xhtml, flash, c++ (winforms, sdl etc) all use rectangular co-ordinate systems for describing objects positions and bounds.

I do hope that the original poster has a greater understanding of a way to draw text and images together and that if they do not, that they continue to seek answers and probe further.

well the simplest way is to treat the text as an image, create a larger image representing the entire area that the text and images exist on and draw each object. Of course this all sounds very simple to an experienced programmer but I recognize some people may have trouble so i'll try to break it down a bit more for you

1) a glyph is the description of a character so it would have an x and y origin and an x and y extent (xorigin+width and yorigin+height)
2) the glyph would also contain a series of points with their position within the glyph (again x and y) and intensity, because if all points had the same intensity it could only represent a solid block or empty block, which would result in aliasing (blocky text)
3) once you have these points and have created a texture that is the size of the glyph, you can set each pixel to the value of the color you wish it to be with alpha multiplied by the intensity from the point (this will create anti-aliased text that is transparent and most computers now support rgba colours)
4) work out how large each entire piece of text is and draw each glyph in the text
5) draw the text and images onto the larger image

N.B. every object will have a display rectangle, so text, images, characters (which make up text) and the drawing area can all be described and should use a rectangle to descirbe their position and extent

@ApochPiQ, seriously the old addage "if you cannot say anything helpful, be silent!" springs to mind because mocking someone and then telling them what they want to do is trivial helps no-one

I appreciate your answer, it was the best, even though I don't completely understand. I'm not a programmer so what I really need is to now what this process is actually called and what the end result file type I will have? Because I'm sure the document wont stay as an image document right?

@ApochPiQ, seriously the old addage "if you cannot say anything helpful, be silent!" springs to mind because mocking someone and then telling them what they want to do is trivial helps no-one

Who pissed in your cheerios? I thought the same thing when I read the OPs question. It sounds very much like an image with text boxes set on top of it.

[quote name='Lewis_1986' timestamp='1314782344' post='4855801']
well the simplest way is to treat the text as an image, create a larger image representing the entire area that the text and images exist on and draw each object. Of course this all sounds very simple to an experienced programmer but I recognize some people may have trouble so i'll try to break it down a bit more for you

1) a glyph is the description of a character so it would have an x and y origin and an x and y extent (xorigin+width and yorigin+height)
2) the glyph would also contain a series of points with their position within the glyph (again x and y) and intensity, because if all points had the same intensity it could only represent a solid block or empty block, which would result in aliasing (blocky text)
3) once you have these points and have created a texture that is the size of the glyph, you can set each pixel to the value of the color you wish it to be with alpha multiplied by the intensity from the point (this will create anti-aliased text that is transparent and most computers now support rgba colours)
4) work out how large each entire piece of text is and draw each glyph in the text
5) draw the text and images onto the larger image

N.B. every object will have a display rectangle, so text, images, characters (which make up text) and the drawing area can all be described and should use a rectangle to descirbe their position and extent

@ApochPiQ, seriously the old addage "if you cannot say anything helpful, be silent!" springs to mind because mocking someone and then telling them what they want to do is trivial helps no-one

I appreciate your answer, it was the best, even though I don't completely understand. I'm not a programmer so what I really need is to now what this process is actually called and what the end result file type I will have? Because I'm sure the document wont stay as an image document right?
[/quote]

An image is hardly a document. An image is static, and nonchanging. It is meant to be displayed only, or edited pixel by pixel to be displayed differently. You need more understanding of GUI elements to accomplish any sort of graphical input. You will need programming experience to use programming concepts.

On top of this, it is unlikely to write a program to print formatted text fields to an image, and then write to a magic file format. You need to learn data paradigms, because most data in a program like a GUI is not read and written to files repeatedly.

And, I agree with ApochPiQ. It was the simplest and fastest way to show a flaw in a statement, and is seeking clarification. If the OP means what I think he means, he is way off base.

[quote name='LandriGames' timestamp='1314799308' post='4855886']
[quote name='Lewis_1986' timestamp='1314782344' post='4855801']
well the simplest way is to treat the text as an image, create a larger image representing the entire area that the text and images exist on and draw each object. Of course this all sounds very simple to an experienced programmer but I recognize some people may have trouble so i'll try to break it down a bit more for you

1) a glyph is the description of a character so it would have an x and y origin and an x and y extent (xorigin+width and yorigin+height)
2) the glyph would also contain a series of points with their position within the glyph (again x and y) and intensity, because if all points had the same intensity it could only represent a solid block or empty block, which would result in aliasing (blocky text)
3) once you have these points and have created a texture that is the size of the glyph, you can set each pixel to the value of the color you wish it to be with alpha multiplied by the intensity from the point (this will create anti-aliased text that is transparent and most computers now support rgba colours)
4) work out how large each entire piece of text is and draw each glyph in the text
5) draw the text and images onto the larger image

N.B. every object will have a display rectangle, so text, images, characters (which make up text) and the drawing area can all be described and should use a rectangle to descirbe their position and extent

@ApochPiQ, seriously the old addage "if you cannot say anything helpful, be silent!" springs to mind because mocking someone and then telling them what they want to do is trivial helps no-one

I appreciate your answer, it was the best, even though I don't completely understand. I'm not a programmer so what I really need is to now what this process is actually called and what the end result file type I will have? Because I'm sure the document wont stay as an image document right?
[/quote]

An image is hardly a document. An image is static, and nonchanging. It is meant to be displayed only, or edited pixel by pixel to be displayed differently. You need more understanding of GUI elements to accomplish any sort of graphical input. You will need programming experience to use programming concepts.

On top of this, it is unlikely to write a program to print formatted text fields to an image, and then write to a magic file format. You need to learn data paradigms, because most data in a program like a GUI is not read and written to files repeatedly.

And, I agree with ApochPiQ. It was the simplest and fastest way to show a flaw in a statement, and is seeking clarification. If the OP means what I think he means, he is way off base.
[/quote]

Well I'm not a programmer and I'm not studying it either lol. Way to technical for me. The file doesn't need to be an image but it has to look like once, and the user has to be able to write text in certain fields.

[quote name='Ectara' timestamp='1314804464' post='4855921']
[quote name='LandriGames' timestamp='1314799308' post='4855886']
[quote name='Lewis_1986' timestamp='1314782344' post='4855801']
well the simplest way is to treat the text as an image, create a larger image representing the entire area that the text and images exist on and draw each object. Of course this all sounds very simple to an experienced programmer but I recognize some people may have trouble so i'll try to break it down a bit more for you

1) a glyph is the description of a character so it would have an x and y origin and an x and y extent (xorigin+width and yorigin+height)
2) the glyph would also contain a series of points with their position within the glyph (again x and y) and intensity, because if all points had the same intensity it could only represent a solid block or empty block, which would result in aliasing (blocky text)
3) once you have these points and have created a texture that is the size of the glyph, you can set each pixel to the value of the color you wish it to be with alpha multiplied by the intensity from the point (this will create anti-aliased text that is transparent and most computers now support rgba colours)
4) work out how large each entire piece of text is and draw each glyph in the text
5) draw the text and images onto the larger image

N.B. every object will have a display rectangle, so text, images, characters (which make up text) and the drawing area can all be described and should use a rectangle to descirbe their position and extent

@ApochPiQ, seriously the old addage "if you cannot say anything helpful, be silent!" springs to mind because mocking someone and then telling them what they want to do is trivial helps no-one

I appreciate your answer, it was the best, even though I don't completely understand. I'm not a programmer so what I really need is to now what this process is actually called and what the end result file type I will have? Because I'm sure the document wont stay as an image document right?
[/quote]

An image is hardly a document. An image is static, and nonchanging. It is meant to be displayed only, or edited pixel by pixel to be displayed differently. You need more understanding of GUI elements to accomplish any sort of graphical input. You will need programming experience to use programming concepts.

On top of this, it is unlikely to write a program to print formatted text fields to an image, and then write to a magic file format. You need to learn data paradigms, because most data in a program like a GUI is not read and written to files repeatedly.

And, I agree with ApochPiQ. It was the simplest and fastest way to show a flaw in a statement, and is seeking clarification. If the OP means what I think he means, he is way off base.
[/quote]

Well I'm not a programmer and I'm not studying it either lol. Way to technical for me. The file doesn't need to be an image but it has to look like once, and the user has to be able to write text in certain fields.
[/quote]

Here guys, this is what I'm talking about. As you can see, there's an image with text fields. The file cannot allow text outside of the boxes. How exactly is this done?

Do you have a link to the original location? The one you posted doesn't actually allow text entry.

Hi, what would you like to acheive functionally and visually, and what should the player(s) be able to do in that program? It's normal to not know how to get there, but its atypic not to know where, so you probably have a goos feel of what you want to end up with.

Edit: wow, you already beat me to it! ;-)

ya wrong forum perhaps

sorry there is no magic button to press to do whatever it is that you are trying to do.

No it's the right forum alright, if landrigames is ready to spend some time getting involved in development. But otherwise, why would he be here?

I suggest you make a mockup with some quick php programming, since it's pretty easy to set up and can do what you want it to within a reasonable time, even if you're completely new to it.

Do you have a link to the original location? The one you posted doesn't actually allow text entry.

It's an example image, you can't really place text in those fields, but that's what I want.

right personally I don't care what anyone's opinion is because I work on many different hardware platforms and get paid for what I do, if pixels are set then it is an image FULL STOP! You can abstract an issue as much as you like, and encapsulate it in various classes and give it fancy names but as long as you set pixels, your drawing an image. Drawing a font is an image action where the images width and height are relative to the resolution of the font, this is called raster text, it works with windowing toolkits, hardware accelerated libraries such as opengl and the result can be translated to devices like lcd's and braille output devices.

Secondly, to the OP, I apologise for all this noise and that is the only thing I can describe it as but there is not a name for the system, although the process of combining images is called compositing. Are you looking for a framework that allows you to simplify this process or are you just asking how it would work because it can be simple or complex depending upon what you want to get out of it. drawing ascii characters for example is much easier than drawing wide characters 255 values vs 65535 values assuming in both cases loose one possible value to signify invalid data.

You can PM me if you like or try to be more specific, no matter how trivial all details are needed for giving a fuller answer

Edit:
Just seen your screenie, are you looking to implement this for the web or in a traditional application, because if it is for the web use input text boxes like below (note please do not copy and paste because this is not optimal code)

some visible uneditable-text

<input type="text" name="whatever_name" id="whatever_name" size="20" />

some visible uneditable-text2

<input type="text" name="whatever_name" id="whatever_name" size="20" />

If it is application code then it will be more complicated because you would need to program the classes such as input, also if you were drawing with opengl you could use glScissor command to only re-draw the textbox

Edit2:
by the way to only show the box of text is called clipping and using glScissor is one way of doing this, another way is to draw the text from right to left until the pixel position is less than the textboxes x component, but this is only for an application

right personally I don't care what anyone's opinion is because I work on many different hardware platforms and get paid for what I do, if pixels are set then it is an image FULL STOP! You can abstract an issue as much as you like, and encapsulate it in various classes and give it fancy names but as long as you set pixels, your drawing an image.

If you don't care about anyone's opinion, what makes you believe anyone would care about yours?

This is clearly a beginners question though, it just might not belong in the right section of the forums.
That could've been what kunos meant, too. It's more a "how do i start if i want to end up with..." sort of question.

If you just want to be able to place text boxes on top of an image, you can do that using basic HTML. If you want extra functionality on top of that (e.g. remembering what was typed into the boxes) then you'll need to write some code to do that.

I'd suggest starting with a detailed specification of what you need though.

If you just want to be able to place text boxes on top of an image, you can do that using basic HTML. If you want extra functionality on top of that (e.g. remembering what was typed into the boxes) then you'll need to write some code to do that.

I'd suggest starting with a detailed specification of what you need though.

I just need an image with text boxes so user can type what they require in them. After they x out the program and re-open the text must remain until erased/backspaced. And the text boxes have to be in specific spots, but that's about it. That's all I need. Of course I would want a custom image of my making and custom box size and font style.

right personally I don't care what anyone's opinion is because I work on many different hardware platforms and get paid for what I do, if pixels are set then it is an image FULL STOP! You can abstract an issue as much as you like, and encapsulate it in various classes and give it fancy names but as long as you set pixels, your drawing an image. Drawing a font is an image action where the images width and height are relative to the resolution of the font, this is called raster text, it works with windowing toolkits, hardware accelerated libraries such as opengl and the result can be translated to devices like lcd's and braille output devices.

Secondly, to the OP, I apologise for all this noise and that is the only thing I can describe it as but there is not a name for the system, although the process of combining images is called compositing. Are you looking for a framework that allows you to simplify this process or are you just asking how it would work because it can be simple or complex depending upon what you want to get out of it. drawing ascii characters for example is much easier than drawing wide characters 255 values vs 65535 values assuming in both cases loose one possible value to signify invalid data.

You can PM me if you like or try to be more specific, no matter how trivial all details are needed for giving a fuller answer

Well you know those pen and paper games like Dungeons and Dragons? You use a character sheet to input your characters stats on with a pencil. I want a program that looks like a character sheet(full color of my design of course) with text boxes where players can input data. The digital player sheet I want to make doesn't need to be an image file I just don't want game players to have to install them you know. And of course I don't want the digital player sheet to be opened with an image viewing software either.