Text or images - whats better?

[plicatibu]

Hi.

In you opinion, what's better: show texts using text or images ? Specially when you're going to localize all text to 2 or more languages.

When using images to present text, I see as a drawback the fact that game size will increase.

I'm all ears.

[Jambutters]

 I'd say just using text for text because its a pain to re-edit all those images when there's a change. Not to mention you save bandwidth too.

[plicatibu]

Thanks for replying.

I thought this too. But Isn't hard to make text align and match its position than an image?

I mean, for each language the size of the same word changes. For instance, the word Work:

Arbeit (German)
Travail (in Italian)
Trabalho (Portuguese)
作業 (Japanese)
工作 (Simplified Chinese)

They have different size (both length and height).

In case we use images, we just define the maximum width and height of it and generate text as images that are scaled to fit the reserved space.

It seems to me that manually tweeking all translated text to fit the space is much more work ( and I'm not sure results will be as good as using images).

But I don't have experience with this to be sure.

 

[Rudrabhoj Bhati]

Create a String keys object. it should take two letter language code (string) as parameter. Language specific properties like job_en, job_jp, job_it, etc. should be private while 'job' it self should be public. When the user creates a new string key object with "en" as the argument, set job = job_en. Now, you could have titlescreen_style_en, titlescreen_style_jp, etc. too. And if that isn't enough you could actually have titlescreen_x_modifier_jp, titlescreen_x_modifier_en, etc. too This would make sure you do not have to do any change to your game logic to change the position of the text based upon language.

This is what I am doing in my latest game.

[ecv]

My opinion is that you should be using text. Scaling "text" images to make them fit doesn't look like a very elegant approach, even if the scaling ratio is kept. I think you should use a font that covers as many different languages characters as possible, decide on a decent size, and then wrap your game around that to keep things consistent: If text appears in a dialog, resize the dialog to fit the contents, if the contents still don't fit, either reduce the text size for all languages or provide a different scheme around that, like scrollbars or displaying the rest of the text after user taps/clicks or after a decent amount of time you'll calculate based on text length (use a different factor for each language!), etc. A lot more involved, but elegant I think.

 

Edited May 22, 2016 by ecv
added info

[plicatibu]

Interesting. I played your game but I didn't saw how to select another language.

How could I do it in your game?

[Rudrabhoj Bhati]

9 hours ago, plicatibu said:

Interesting. I played your game but I didn't saw how to select another language.

How could I do it in your game?

Currently it only supports English. But the system which loads the text is ready to support any number of languages depending upon what the sponsors want.

Edit:

Here is code in haxe:

/*

[*]            Project Frozen Wings, HaxePhaser Version
[*]        Copyrights (c) Agnis Technology 2016 All Rights Reserved
[*]         Closed sourced propietery property of Agnis Technology
-----------------------------------------------------------------------------
                                StringKeys.hx
        The class contains the universal data which is shared by all classes.



*/


package data;

class StringKeys {

  //Empty set
  public var score:String;
  public var highscore:String;
  public var achievements:String;
  public var game_over:String;
  public var victory:String;
  public var level1_message:String;

  public var title_bar_style:Dynamic;
  public var score_text_style:Dynamic;
  public var choose_a_level:String;
  public var choose_level_style:Dynamic;
  public var level_message_style:Dynamic;

  public var help1:String;
  public var help1_style:Dynamic;
  public var help5:String;
  public var help11:String;
  public var help23:String;
  public var help13:String;



  //English set
  private var score_en:String = "Score";
  private var highscore_en:String = "High Score";
  private var achievements_en:String = "Achievements";
  private var game_over_en:String = "Game Over";
  private var victory_en:String = "Victory!";

  private var level1_message_en:String = "Sabotage penguin's attempt to rebuild the Tower of Babel.";
  private var level_message_style_en:Dynamic = {font: '20px Sansita', align: "center", fill: "#fff"};


  private var title_bar_style_en:Dynamic = {font: '60px Sansita', align: "center", fill: "#fff", fontWeight: "bold"};
  private var score_text_style_en:Dynamic = {font: '24px Sansita', align: "left", fill: "#000"};

  private var choose_a_level_en:String = "Choose a Level";
  private var choose_level_style_en:Dynamic = {font: '60px Sansita', align: "center", fill: "#fff", fontWeight: "bold"};

  private var help1_en:String = "Tap left screen to move left";
  private var help1_style_en:Dynamic = {font: '20px Sansita', align: "center", fill: "#fff", fontWeight: "bold"};

  private var help5_en:String = "Surprise";
  private var help11_en:String = "Temporarily protects from saw";
  private var help13_en:String = "Tip: When in air ball doesn't move horizontally.";
  private var help23_en:String = "Reverses the gravity";

  public function new(lang_code:String) {
    if (lang_code == "en") {
      this.score = this.score_en;
      this.highscore = this.highscore_en;
      this.achievements = this.achievements_en;
      this.game_over = this.game_over_en;
      this.victory = this.victory_en;
      this.level1_message = this.level1_message_en;
      this.level_message_style = this.level_message_style_en;
      this.title_bar_style = this.title_bar_style_en;
      this.score_text_style = this.score_text_style_en;

      //Help
      this.help1 = this.help1_en;
      this.help1_style = this.help1_style_en;

      this.help5 = this.help5_en;
      this.help11 = this.help11_en;
      this.help23 = this.help23_en;
      this.help13 = this.help13_en;
    }
  }
}

Ignore what the file says for the source, I provide this part of the code at MIT license.

[mattstyles]

i18n covers best practises for language variants for your applications, most libraries implement these by externally loading language files that describe all the strings (and sometimes the code and/or logic) used by each variant of your application. Generally, once an app bootstraps it won't change language, although, when it does the steps are the same i.e. load the new file and use that to grab strings.

The alternative suggested here is to store it all in code, this is perfectly reasonable but, again, you probably don't want to keep it all in the bulk of your code because it just bloats your codebase, language files typically get fairly large and you usually you only need one so no point in loading those dictionaries for 30-40+ languages when you don't need them. Most specifications would use json, yaml, xml or some variant to store language dictionaries, as we're talking JS here json is probably the natural fit.

The process is the same though, load the language file and use that to perform string based lookups i.e. each language file contains an entry for the key 'work' and has its own variant based on that language. Pluralisation can become tricky, as can gender based changes, although many apps don't need this extra concern, but, when you do need it it is worth using an off-the-shelf library because these edges can be very time-consuming to code into your application.

This process is typically concerned with rendering strings, although you could extrapolate to rendering different images with a very similar system.

And yes, dealing with size differences between strings is a time sink, infact it can be brutal. I work on a large number of applications/sites that require localisation and we try to get our translators to keep translations within a range. Note that all these apps are not games so they typically get styled with css where making adjustments is possibly/arguably easier. 

[plicatibu]

@Rudrabhoj Bhati Thanks for sharing the code. When I asked how to select another language, I meant how to play your game in another language you've translated it to.

 

@mattstyles Thanks for aking your time to help me. I already know how to localize text using external files (I've asked it already here in the forum and some friends kindly taught me).

My concern is what are the implications (advantages and disadvantages) of using images instead of plain text in localization.

As I don't have enough experience to evaluate these implications, I'm asking here for help from friends who already faced this dilemma.

Thank you all.

[mattstyles]

In my opinion using images for text should be a last resort and only turned to when you have very specific requirements about how text should look that can not be filled by other methods.

• Changing a language file is far quicker and easier than creating new image assets.
• Images are not crawlable, although alt tags can mitigate this. Probably not a concern for game assets.
• Images do not solve the problem of differing text lengths across languages.
• Calculating length could actually be easier with images as you just grab their size, although its likely this will end up being a manual task which probably means that it just becomes easier to count the string length and make styling adjustments accordingly. Both ways are a ballache to be honest.
• Fonts are rendered using a similar technique to SVG, meaning they are scalable (bitmap fonts aside). Images are not so robust, generally text in images under scaling will create rendering artefacts, some times you get away with it, most times not.
• Font rendering gives you resolution independence for free i.e. you don't have to worry about retina or high DPI screens.
• If you're going to render your text using the DOM and CSS, well, it was created to render text, hence the ideal web medium for text display, far more so than canvas.

There are probably far more pros and cons to each approach. Neither approach succinctly handles your main pain point of different text length across languages, it's always a pain, the only solution is to let your design handle different text lengths e.g. if you are rendering a modal with text then that modal has to be flexible enough to either change size with the text it is displaying or some other mechanism like paged display or allowing scrolling.

[plicatibu]

It's a very instructive explanation.

Thanks.

[lucyda]

I guess using text instead of images would visually look better. Personally I am working on geometry quizzes game and in order not to waste time I decided to simply use images which turned out not so great visually (you can see for yourself that those look a little clumsy, I'd say). So now I'm thinking of rewriting the whole thing which is lots of work and if I were to use text from the very beginning, I wouldn't be in this trouble now.

[Firenibbler]

Set it up so that when you render text, you render to a separate off-screen canvas and only update that when the text changes, then render that canvas as an image. You get the best of both worlds that way. It is faster to render an image instead of text, but it is hard to change the text on the fly if it is saved as an image.