• Announcements

    • khawk

      Download the Game Design and Indie Game Marketing Freebook   07/19/17

      GameDev.net and CRC Press have teamed up to bring a free ebook of content curated from top titles published by CRC Press. The freebook, Practices of Game Design & Indie Game Marketing, includes chapters from The Art of Game Design: A Book of Lenses, A Practical Guide to Indie Game Marketing, and An Architectural Approach to Level Design. The GameDev.net FreeBook is relevant to game designers, developers, and those interested in learning more about the challenges in game development. We know game development can be a tough discipline and business, so we picked several chapters from CRC Press titles that we thought would be of interest to you, the GameDev.net audience, in your journey to design, develop, and market your next game. The free ebook is available through CRC Press by clicking here. The Curated Books The Art of Game Design: A Book of Lenses, Second Edition, by Jesse Schell Presents 100+ sets of questions, or different lenses, for viewing a game’s design, encompassing diverse fields such as psychology, architecture, music, film, software engineering, theme park design, mathematics, anthropology, and more. Written by one of the world's top game designers, this book describes the deepest and most fundamental principles of game design, demonstrating how tactics used in board, card, and athletic games also work in video games. It provides practical instruction on creating world-class games that will be played again and again. View it here. A Practical Guide to Indie Game Marketing, by Joel Dreskin Marketing is an essential but too frequently overlooked or minimized component of the release plan for indie games. A Practical Guide to Indie Game Marketing provides you with the tools needed to build visibility and sell your indie games. With special focus on those developers with small budgets and limited staff and resources, this book is packed with tangible recommendations and techniques that you can put to use immediately. As a seasoned professional of the indie game arena, author Joel Dreskin gives you insight into practical, real-world experiences of marketing numerous successful games and also provides stories of the failures. View it here. An Architectural Approach to Level Design This is one of the first books to integrate architectural and spatial design theory with the field of level design. The book presents architectural techniques and theories for level designers to use in their own work. It connects architecture and level design in different ways that address the practical elements of how designers construct space and the experiential elements of how and why humans interact with this space. Throughout the text, readers learn skills for spatial layout, evoking emotion through gamespaces, and creating better levels through architectural theory. View it here. Learn more and download the ebook by clicking here. Did you know? GameDev.net and CRC Press also recently teamed up to bring GDNet+ Members up to a 20% discount on all CRC Press books. Learn more about this and other benefits here.
Sign in to follow this  
Followers 0
landriGames

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

25 posts in this topic

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
0

Share this post


Link to post
Share on other sites
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?
0

Share this post


Link to post
Share on other sites
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
-2

Share this post


Link to post
Share on other sites
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
[/quote]

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.
0

Share this post


Link to post
Share on other sites
[quote name='ApochPiQ' timestamp='1314756559' post='4855712']
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?
[/quote]


[quote name='Nanoha' timestamp='1314784498' post='4855812']
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
[/quote]

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.
-1

Share this post


Link to post
Share on other sites
[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
[/quote]

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?
0

Share this post


Link to post
Share on other sites
[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
[/quote]

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.
0

Share this post


Link to post
Share on other sites
[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
[/quote]

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.
0

Share this post


Link to post
Share on other sites
[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
[/quote]

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.
0

Share this post


Link to post
Share on other sites
[quote name='LandriGames' timestamp='1314805444' post='4855928']
[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
[/quote]

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?
0

Share this post


Link to post
Share on other sites
Do you have a link to the original location? The one you posted doesn't actually allow text entry.
0

Share this post


Link to post
Share on other sites
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! ;-)
0

Share this post


Link to post
Share on other sites
ya wrong forum perhaps

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

Share this post


Link to post
Share on other sites
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.
0

Share this post


Link to post
Share on other sites
[quote name='SiCrane' timestamp='1314805970' post='4855931']
Do you have a link to the original location? The one you posted doesn't actually allow text entry.
[/quote]

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

Share this post


Link to post
Share on other sites
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

[b]Edit:[/b]
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)
[code]
<div style=" background: url('./bg-img.jpg'); width: 100%; height: 100%; ">
<div style="position: absolute; left: 50%; top: 50%; margin-top: -100px; margin-left: -150px; width:200px; height: 200px;">
some visible uneditable-text<br/>
<input type="text" name="whatever_name" id="whatever_name" size="20" />
</div>
<div style="position: absolute; left: 50%; top: 50%; margin-top: -100px; margin-left: 50px; width: 200px; height: 200px;">
some visible uneditable-text2<br/>
<input type="text" name="whatever_name" id="whatever_name" size="20" />
</div>
</div>
[/code]

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
-1

Share this post


Link to post
Share on other sites
[quote name='Lewis_1986' timestamp='1314810446' post='4855969']
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.
[/quote]
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.
0

Share this post


Link to post
Share on other sites
If you just want to be able to place text boxes on top of an image, you can do that using [url="http://www.w3schools.com/html/html_forms.asp"]basic HTML[/url]. 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.
0

Share this post


Link to post
Share on other sites
[quote name='Adam_42' timestamp='1314811802' post='4855979']
If you just want to be able to place text boxes on top of an image, you can do that using [url="http://www.w3schools.com/html/html_forms.asp"]basic HTML[/url]. 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.
[/quote]

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.
0

Share this post


Link to post
Share on other sites
[quote name='Lewis_1986' timestamp='1314810446' post='4855969']
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
[/quote]

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.
0

Share this post


Link to post
Share on other sites
[quote name='LandriGames' timestamp='1314812366' post='4855982']
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.
[/quote]

It sounds to me as if you'd want to create a tiny little web server to come up with that sheet; text boxes on a backround image.
There's more to it, though. I don't know what you'd be wanting to do with it next, but if you just want to print the character sheet, -or let the user save it, you really only need to write a single file of html as stated before.

However, if you want to store the values, and use them elsewhere, it's slightly more advanced.

If you want somebody to do it for you, see the "Help Wanted" -section of this forum.
0

Share this post


Link to post
Share on other sites
[quote name='SuperVGA' timestamp='1314811437' post='4855977']
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.
[/quote]

no.. maybe I should've quoted some lines to make it clear. The guy said he doesnt know about programming nor he's planning to study it because it's way too complicated for him. That's why I wondered what was he doing on a game programming forum.
0

Share this post


Link to post
Share on other sites
To the OP:
Thanks for clarifying.

(By the way, I hope I didn't offend with my original reply. Contrary to some people's interpretation, it was meant as a light joke and as a probe for more details into what you wanted to do, not to make fun of you.)


What you want could be done in a couple of hours by even a moderately experienced programmer using C#, Java, VB.Net, HTML, or any other of a handful of technologies. If you are serious about getting someone to work on this, I recommend posting in the Help Wanted forum (be sure to follow the mandatory post template) or on a "rent a coder" type website where you can pay people for small projects. The alternative would be to learn how to do it yourself; not too big of a deal, probably a weekend or two worth of investment, and it's a fantastic skill set to have. I totally understand if you'd rather not, though!
1

Share this post


Link to post
Share on other sites
I see! You would be best making it online then because it will be much easier, and nobody will have to install anything. As an added benfit people being online would be a given because D&D is a collaborative game (not single player). There are lots of freeware editors for html out there and basic javascript can load and save cookies of what each player has typed. you would also need a simple backend to be programmed in a server-side scripting language but it's all quite easy to do. You will need a web host with php or similar scripting language support and the rest of the information can be located through google and w3schools which are both free. Personally I know the webhost I use is affordable at only $10 per month (www.dreamhost.com) so get cracking and I will definately look forward to seeing what you come up with.

Also after clarification from ApochPiQ about the intention of the response, I would like to apologise as I must have completely misinterpreted the post sent by you :wink:
0

Share this post


Link to post
Share on other sites
Okay, and then what do you want people do be able to do with the result?

- print them out with the text in (e.g. for a tabletop D&D game, just prettier)
- share the image with the text in online
- something else
0

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0