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

Started by
24 comments, last by landriGames 12 years, 7 months ago
I'm pretty sure I've seen images with little fields for writing text before. I'm wondering how hard that is? Does it take very long to pull off?

I'm an aspiring board game / RPG designer and I want to go completely digital so I'm going to need image files where players can input data. Could you give me some info on this? Maybe tell me where some tutorials are for this sort of thing?

If I was going to pay to get a single page with say 50 different entry slots how much should that cost me?

Thanks
Advertisement
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?

Wielder of the Sacred Wands
[Work - ArenaNet] [Epoch Language] [Scribblings]

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.

Interested in Fractals? Check out my App, Fractal Scout, free on the Google Play store.


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?

This topic is closed to new replies.

Advertisement