User Tools

Site Tools


en:tutorials:shaders:text_and_shaders

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision
Previous revision
tutorials:community:enobayram:text_and_shaders [2015/12/08 23:49 (8 years ago)] – [Illuminating the Text with a Light!] enobayramen:tutorials:shaders:text_and_shaders [2020/08/31 06:01 (4 years ago)] (current) – ↷ Links adapted because of a move operation 42.156.254.115
Line 28: Line 28:
  
   * And a plump.png file that looks like (**Don't try to save that image** and use it in your game, I've added a background to it so that it's visible in this page. If you're too lazy to call the command above, download [[http://orx-project.org/wiki/_media/tutorials/community/enobayram/plump.png|the image from here]] instead):   * And a plump.png file that looks like (**Don't try to save that image** and use it in your game, I've added a background to it so that it's visible in this page. If you're too lazy to call the command above, download [[http://orx-project.org/wiki/_media/tutorials/community/enobayram/plump.png|the image from here]] instead):
-{{plump_with_transparency.png}}+{{tutorials:community:enobayram:plump_with_transparency.png}}
  
 These two files are all you need to use this font in your game, copy them to somewhere your game can find them. **Important note:** ''plump.ini'' file indicates that the font ''Texture'' is ''plump.png'', which means that ''plump.png'' is at the root of your data folder! These two files are all you need to use this font in your game, copy them to somewhere your game can find them. **Important note:** ''plump.ini'' file indicates that the font ''Texture'' is ''plump.png'', which means that ''plump.png'' is at the root of your data folder!
Line 51: Line 51:
 Here's the result: Here's the result:
  
-{{text_and_shader_hello_world.png|}}+{{tutorials:community:enobayram:text_and_shader_hello_world.png|}}
  
 [[https://github.com/enobayram/orx_text_and_shader_tutorial/tree/ImportingTheFont|This is the code so far.]] [[https://github.com/enobayram/orx_text_and_shader_tutorial/tree/ImportingTheFont|This is the code so far.]]
Line 65: Line 65:
 Anyway, the result is (The [[http://orx-project.org/wiki/_media/tutorials/community/enobayram/plump_with_border_original.png|download link]] as before): Anyway, the result is (The [[http://orx-project.org/wiki/_media/tutorials/community/enobayram/plump_with_border_original.png|download link]] as before):
  
-{{plump_with_border.png}}+{{tutorials:community:enobayram:plump_with_border.png}}
  
 And this is how it looks in the game: And this is how it looks in the game:
  
-{{text_and_shader_hello_world_border.png}}+{{tutorials:community:enobayram:text_and_shader_hello_world_border.png}}
  
 Nice! [[https://github.com/enobayram/orx_text_and_shader_tutorial/tree/PlayingWithTheFont|This is the code so far]]. Nice! [[https://github.com/enobayram/orx_text_and_shader_tutorial/tree/PlayingWithTheFont|This is the code so far]].
Line 80: Line 80:
 Now, take a look at the original generated font texture again: Now, take a look at the original generated font texture again:
  
-{{plump_with_transparency.png}}+{{tutorials:community:enobayram:plump_with_transparency.png}}
  
 It's a 32 bit RGBA image that just conveys the information of a 1bit image! So much wasted potential. In fact, we could just drop all the color values and fulfill the job of the font texture with just the alpha channel. Let's do that; open the original plump.png in GIMP and paint it all black (Note that I didn't bother myself with the transparency image this time since the image is visible as it is, so you can just download this image if you like): It's a 32 bit RGBA image that just conveys the information of a 1bit image! So much wasted potential. In fact, we could just drop all the color values and fulfill the job of the font texture with just the alpha channel. Let's do that; open the original plump.png in GIMP and paint it all black (Note that I didn't bother myself with the transparency image this time since the image is visible as it is, so you can just download this image if you like):
Line 111: Line 111:
 And the output is exactly the same as before: And the output is exactly the same as before:
  
-{{text_and_shader_hello_world.png|}}+{{tutorials:community:enobayram:text_and_shader_hello_world.png|}}
  
-So, what did we gain by this? Now we have 3 color channels that we can do anything we want with!!! So we'll use the red channel to carry the border information. We'll edit plump.png the same way we did in the [[tutorials:community:enobayram:text_and_shaders#playing_with_the_font|Playing with The Font section]]+So, what did we gain by this? Now we have 3 color channels that we can do anything we want with!!! So we'll use the red channel to carry the border information. We'll edit plump.png the same way we did in the [[en:tutorials:shaders:text_and_shaders#playing_with_the_font|Playing with The Font section]]
 except that we'll be stroking with red: except that we'll be stroking with red:
  
en/tutorials/shaders/text_and_shaders.1449647344.txt.gz · Last modified: 2017/05/30 00:50 (7 years ago) (external edit)