Rpg style text display

[jinxtengu]

Hi,
So basically I wanted to incorporate some rpg elements into a game that im working on with z game editor, and so
I need to build a text dialogue box that displays the letters of a dialogue, letter by letter, as in the style of alot of old rpgs and nes games
for example :

I guess to do this, it would involve some kind of loop,
that updates the letter position.

I know it's technically kinda simple, buuut
If someone could post an example, that would be really awesome!!!

does anyone know a simple way to reproduce this effect?

[Kjell]

Hi jinxtengu,

The animated text effect itself is super easy, but depending on what "features" are needed for the cut-scenes that drive the text animation your implementation might vary quite a bit. Anyway, below is a simple example ( press spacebar to continue ).

Code: Select all

<?xml version="1.0" encoding="iso-8859-1" ?>
<ZApplication Name="App" Caption="Phantasy Star" Camera="Camera" ViewportRatio="2" FileVersion="2">
  <OnLoaded>
    <FileAction File="TextFile"/>
    <ZExpression>
      <Expression>
<![CDATA[//

RenderText.Text = "";

TextIndex = 0;
TextState = 0;
TextTimer = 0;

//

PageIndex = 0;
RenderImage.TileIndex = 0;]]>
      </Expression>
    </ZExpression>
  </OnLoaded>
  <OnUpdate>
    <Group Comment="Input">
      <Children>
        <ZExpression>
          <Expression>
<![CDATA[//

Key[1] = Key[0];
Key[0] = 0;]]>
          </Expression>
        </ZExpression>
        <KeyPress Keys=" ">
          <OnPressed>
            <ZExpression>
              <Expression>
<![CDATA[//

Key[0]++;]]>
              </Expression>
            </ZExpression>
          </OnPressed>
        </KeyPress>
        <ZExpression>
          <Expression>
<![CDATA[//

Key[2] = Key[0] && !Key[1];]]>
          </Expression>
        </ZExpression>
      </Children>
    </Group>
    <ZExpression Comment="Text">
      <Expression>
<![CDATA[// If text is done animating & space-bar is pressed go to next page

if(Key[2] && TextState && (TextIndex < Text.SizeDim1))
{
  TextState = 0; // Set text-state to "not finished animating"
  RenderText.Text = ""; // Clear text on screen
  PageIndex++; // Increment page index
}

// Animate text

if(TextState == 0)
{
  TextTimer += 60*App.DeltaTime; // Timer runs at 60 units per second

  while(TextIndex < TextTimer) // Catch up with the timer
  {
    int c = Text[TextIndex++];

    if(c == 0xA) // When (CR)LF is found, check for sequential CRLF
    {
      c = Text[TextIndex++];

      if(c == 0xD) // Sequential CRLF found, animation is done
      {
        TextState = 1;
        TextIndex++;
      }
    }

    if(c == 0xD)RenderText.Text += "\n"; // Phantasy Star uses double line breaks, so insert a extra break

    RenderText.Text += chr(c); // Add character to RenderText
  }
}

// Update image based on page

switch(PageIndex)
{
  case 0: RenderImage.TileIndex = 0; break;
  case 2: RenderImage.TileIndex = 1; break;
  case 6: RenderImage.TileIndex = 2; break;
}]]>
      </Expression>
    </ZExpression>
  </OnUpdate>
  <OnRender>
    <UseMaterial Material="FrameMaterial"/>
    <RenderMesh Mesh="FrameMesh"/>
    <UseMaterial Material="FontMaterial"/>
    <RenderText Name="RenderText" X="6" Y="6.5" Scale="10" Align="1" UseModelSpace="255"/>
    <RenderTransformGroup Scale="0.5 0.5 1" Translate="6 21 0">
      <Children>
        <RenderTile Name="RenderImage" TileSet="ImageTileSet"/>
      </Children>
    </RenderTransformGroup>
  </OnRender>
  <Content>
    <Group Comment="Input">
      <Children>
        <Array Name="Key" Type="4" SizeDim1="3"/>
      </Children>
    </Group>
    <Group Comment="Font">
      <Children>
        <Font Name="Font" Bitmap="FontBitmap" FirstChar="32" CharPixelWidth="8" CharPixelHeight="8"/>
        <Bitmap Name="FontBitmap" Width="512" Height="8" Filter="1">
          <Producers>
            <BitmapFromFile DataWidth="512" DataHeight="8">
              <BitmapFile>
<![CDATA[78DAED9A518EC3200C44B9FFA553A995AA36E0F18C21141AFB6F291BB0139ECD40298E1D4F2B3736D5FD8CD89C3887476106AABBBDFF3CBEADFEAF533BD3F9F3573043F0FC6618DDA181CB96BFAF76373EFC7C787F9B4333FE5AA3E0FEE0AB002FCBF5CE7AEFCBAECAA49914818CD8E22920F6125DBE31ED0CF7C87686B7AA23FC3CC9C782BCE6E6BB9E389371C0FD19FE631FC996B4CC806973E22CD5FF4C7D3E8A63EBF09FE1559D2C2EE53FF31C5C4B48FCC7FB232B05A8FB8EA50A9EA49F1A81BDF671C97F7514B21E9ECF7F321F91EA0A861E43308BFF582A71F5B4A6F883F5B75FF1BF3F9BEFB22A9B2BE26EE240F2FF0E8906F39FD7B1255DBDE8E702F83B9CC07FAB3E97F83F44E791EAF0B05ED75FFFEFCBFF4C01699BD6FFE4196B13AD03EBF951FA0F53C706F82FE93F409FA9297135FFDDED400FFFAD46579BB242BA4B0A001E4D9E7CD6D8C9FF8DF8BFECF9AFBBB40B7DFEBB32FF63FA8F55EE3241C084DC741790FC4FFBB314237D48F8D2E075F73FF947F5DCFF0C9FCF0EBFFF198B67A03F9EA7CA7F0956A7E39B1574E30708F89AD6]]>
              </BitmapFile>
            </BitmapFromFile>
          </Producers>
        </Bitmap>
        <Material Name="FontMaterial" Shading="1" Light="0" ZBuffer="0" Font="Font"/>
      </Children>
    </Group>
    <Group Comment="Frame">
      <Children>
        <Mesh Name="FrameMesh">
          <Producers>
            <MeshBox Scale="11 7 1" Grid2DOnly="255"/>
            <MeshTransform Position="16 15 0"/>
          </Producers>
        </Mesh>
        <Bitmap Name="FrameBitmap" Width="176" Height="112" Filter="1">
          <Producers>
            <BitmapFromFile DataWidth="176" DataHeight="112">
              <BitmapFile>
<![CDATA[78DAEDDA518EA4300C04D03EE34A7B49B477CC4E4F87C431B09BCF81BC5234128C9B1F4AAEB2A9D7ABA31467C573C4E7FEAF57FFFB3E5BBFF3E7F7FBB27CB0BD2F7BF1A6FE96F5E9750F64D81FF57ECEF7E5FEABF22B147CFDB73E796B8F2AEAEF5BFF79DDADA0F1A1326A2FFEBAEC44DA868E31B02B14A8BF6B7D29AD7BBC868E511B4B7B4E7C42FB6D26642B537FB7FADA1FAAAC0416ED7DA3B688ED844EAD879C28D1053FD5FFE4FA4A92EFE6D07D42F015B178FF6F890F8FFEE47053FDCDEAA3AF08EE62B4A65BA68AF3E0D3BCC130A404B311EFC3B391FAC0D01C5A4B09DD039ECF87E4309BEE041AB401161ECF87611D512E27537AB18E5E9C6F2DCA2022FAC34AFDE1C43FA479F3633BE1F17CD89751877933D023ADB2E1D97EF2F8DEDB063BECAB0B3EACE11F4ADB57F7AF57F8800F890FF4825E1C7211FC243F69DE346F9ECF9BF6512BFA87EB148D7DF5A2FDE1645FED7BD6B27EF2FC7B96EFDDABEAC5C5F76E7CC007F9077A21FF00FFF793E64DF3A6FC033EC83F40E483FC03243F29FF00C13FC83FC0041FE805BD907FE027E51F6072DEB48F5AD13FC83F40EA0FF20FD0FDA4FC0344BD907F80093ED00B7A21FFC04FCA3FC0C4BC691FB56E7F907F80CA07F907487E52FE01827F907F80093ED00B7A21FFC04FCA3FC0E4BC691FB5A27F907F80D41FE41FA0FB49F907887A21FF00137CA017F442FE819F947F808979D33E6ADDFE20FF00950FF20F90FCA4FC0304FF20FF00137CA017F442FE819F947F80C979D33E6A45FF20FF00A93FC83F40F793F20F10F542FE0126F8402FE885FC033F29FF0013F3A67DD4BAFD41FE012A1FE41F20F949F90708FE41FE0126F8402FE885FC033F29FF0093F3A67DD48AFE41FE01527F907F80EE27E51F20EA85FC034CF0815ED00BF9077E52FE0126E64DFBA875FB83FC03543EC83F40F293F20F10FC83FC034CF0815ED00BF9077E52FE0126E74DFBA815FD83FC03A4FE20FF00DD4FCA3F40D48BABFC4324C367BE701E7FEA8BDED27232CF9B5F974365D9EFD49652D756D19DA63D86FA9F5F5FEF5CCC9B1F02B42DE5D15E369EC4E70C8644FDBDEA4BDC4C0EA2B013A3EDAB5FC95E0E93C8456A42FDBDEABB37D89D649B2B7B87D9C993ED65A05F26642B537FABFA2034A5A9C97195FD8FFE30F49F097EAAFFC9F57176387EB48AC2117C451996D8C19F1C6EAABF5F7D7ADD9733A9B3D889F80B199784E6]]>
              </BitmapFile>
            </BitmapFromFile>
          </Producers>
        </Bitmap>
        <Material Name="FrameMaterial" Shading="1" Light="0" ZBuffer="0">
          <Textures>
            <MaterialTexture Texture="FrameBitmap" TextureWrapMode="2" TexCoords="1"/>
          </Textures>
        </Material>
      </Children>
    </Group>
    <Group Comment="Page">
      <Children>
        <Bitmap Name="ImageBitmap" Width="40" Height="72" Filter="1">
          <Producers>
            <BitmapFromFile DataWidth="40" DataHeight="72">
              <BitmapFile>
<![CDATA[78DAED59DBAEE3200CF43722F193887FF4065FC64ED226294956FBB095555192C330B6F18543C4F455882B0F21EAAD73EB6386C7600893C8786DF994DA55EC8F97BFB247FCBB90822AAE8072AFA4036EF2B30916AF7175B795A7408780AF2C3E765244741B4A4736109419BBBD814BE47A946517B28B2CB80B168522C76B6333F2089A9D55B280BA055599CBCA0B6201D566C47527A6EAD8EE3CD3613E57EC806E42AAAAAD85B5EB017C21F2745ACF46B02865C1751F4B6625C38514BA03CAEA36E4CB02577D697CB7F5A31AAC6FE2EA9ABA2CF4BC3AB6F43CA8AA3A431737A80690929E42D50FE1F2864B91A805687D845D69607904972891D5509924E33E48566575401C0E83C7359CBDDA4F65B7D4C01D26CE87F72DDC81A5D1B15B8E70EF2AF4A065C3C4C0056B77E60E7F7E1A7415B814CBD05BB8F43BB8BC09BF08C20FC6C68353BC874348A177702D546A19A0E82EEF91B5BA621D0C21AFE26613EF13EE7BA0C8117BEF7A19F403FAB42F2D49FC542C15EA375BC4A0261B602BEFB4A6D59FFAF1242D95E7F272B5F775E60A6EF7C8409E140CC821C8ABCBF8AD45A1600194752C7211B778CBA0B9806A22A5149A12C92264AB800A16A77D5EE5DB22F1812FA0F7701646AAD7D1097418EE325FAF21BB0667A58092DEF80AE58899F24E4FE698210BEF12B2CB9AC24836909846555F4DB199A9F9DE8FA2A9569CC7E11A53AE041AD97C0D57EF49B7943E17117150C99A32712D454C4E4E49BDA1D8A63E4073B8C5F53C34DCB8A4E3AC29D8CF4BDF18B42BB4652E4FD9D798863EF338AA2CD3B0068A2E8ACDA0195117B9CE742C9BAAB80C1DE152CE5466AAC93A40CFF8665320CBE7154ADC395830E444730F4A5ED25F608AEF1EA05155BA5985E1DEA6DB02ECF2A94194F36D47E9888A3D824362EA5E34074A165AC97C15CD48A4240F53DDFDA778E67250FA293A45F41BA051D1651F0EFB57ABAEC3D5FDE2652234F9820357A39FB7C006BACFCE9C7AD20950C375503D41A82EACB4FB14BAD58E8526417D2905B5B05F80286EF6354757BBE4B9814B91686403D8C39D65AF6BDB100D97DE064D864386FD4BA0FFE51F17E494D77D6F973A4736A9EF918A70BA2BA1E935442F11356DD5A8512798F2E156839D55E9967F096D5AD2C30956BAF2A375458AC9DDC71A0DBC935748E5111FC9BA03DA40A7446C959BE6F73DBB14CF4977755DDB91ECFC2E4E97E24C21DBD70B9218576F0D2E775EB8675E516E5698F69A3A1D803606DCC6B5BAF46E97DB9FB898F2BA3177D2E9A7B7B49492D43777A2535F955C4FBB9A1F653F28D3A79283D77E9577BB9FFF90F5A4A2C89DCEC5222D2F18371EDFE7B746A9712FD17F699337EB9FCE1F999B7F89395FDAEAB9767B0EF77C7C1C557E117820BCE268FED17C71EA4B13F72A3FE16EF2F2C7F907417154119FBFCFAFAFD7A6C78D3FC78D2FF3F8BFFC68466E8CC10B76DC44D7DDFC6DA6698C93C291B93ECFDF67EA83F8973452F3C1FC1FD7AF6F05]]>
              </BitmapFile>
            </BitmapFromFile>
          </Producers>
        </Bitmap>
        <TileSet Name="ImageTileSet" Bitmap="ImageBitmap" TileWidth="40" TileHeight="24"/>
        <Variable Name="PageIndex" Type="1"/>
      </Children>
    </Group>
    <Group Comment="Text">
      <Children>
        <Array Name="Text" Type="4" SizeDim1="487"/>
        <Variable Name="TextIndex" Type="1"/>
        <Variable Name="TextState" Type="4"/>
        <Variable Name="TextTimer"/>
        <File Name="TextFile" TargetArray="Text">
          <FileEmbedded>
<![CDATA[78DA2D91418EC3200C45F748DCC1E9A69B4EEEE08213D0801D816994FB5F644CA68B48C1D8FFFF677A18758128C0A2D0396F9B77D8647084CC50B0E7F0EC56DA36CCAD2F50081B7BA72977FBEF5D184E2A65F1CE3BA6260B9C0915121EC78F77C414A73A3F1562A6BB0B4BEE2FFB94D8CEE6601670AB61CCBC7B27A3C129AD4450F12E52D7368266E115F214D09669DE99620FF2A1E6DD4C7314E4FE82F7D0D9166498C08432B63A42F2EE7D41BD3A956D9D2AD9327E0892F144900DD0BB8A069335C1DE08D53B3326DEEDCC58297AF7100BB83EA0E2F526D044779A53E6F8250302F21C9203FEA9D62F2C647D760B2C56571BDAA441A5154CC42C84F76FA0339762E2BF561E8DE6926D93F58277133333CC38C127933DCD07F3DCDF891A12CC2D00729C3A877553B0417AC1FD22B3F80715BE7168]]>
          </FileEmbedded>
        </File>
      </Children>
    </Group>
    <Camera Name="Camera" Kind="1" Position="16 12 1" OrthoZoom="12"/>
  </Content>
</ZApplication>

K

[jinxtengu]

Thanks alot Kjell. Your truly a legend
Hey I was looking at the code you posted and I was wondering a few things.
with this bit:

if(c == 0xD) // Sequential CRLF found, animation is done
what does "0xD" denote?

also what does CRLF stand for?

also with Text[TextIndex++];

could you explain what TextIndex++ denotes, and why the double plus signs?

Sorry for all these stupid questions. I really want to improve my coding ability so I can make better games.
I've nearly finished my first game with z game editor. I will be sure to post it here when it's done (and give credit for the code assistance)

[Kjell]

Hi jinxtengu,

what does "0xD" denote?

When you press Enter ( for a newline ) in Notepad ( on Windows ) it inserts the following two bytes:

Code: Select all

0x0D = 13 = CR = Carriage Return
0x0A = 10 = LF = Line Feed

So basically the code is looking for two consecutive newlines to detect the end of a "page".

could you explain what TextIndex++ denotes, and why the double plus signs?

The following line:

Code: Select all

int c = Text[TextIndex++];

.. is basically the same as:

Code: Select all

int c = Text[TextIndex];
TextIndex = TextIndex+1;

.. just shorter & (slightly) faster. You can read more about Increment & decrement operators here.

K

[jinxtengu]

much appreciated. Thanks KJell
I may have some further questions about this but not today.