Water effect ready to use in 2D games, like a platformer demo

Posted on by michalis

2D water in a platformer demo
2D water in a platformer demo

Project cge-2d-water-effect by Trung Le (Kagamma) shows how to do a beautiful water for 2D games. The water is represented as a volume that you can easily move and scale around. It supports reflection and refraction.

Under the movies, we list detailed usage instructions, so read on 🙂

Technically, it is expressed as an X3D scene with a geometry and a special shader, that you should load into a special TCastleScene descendant: TCastleSceneScreenBuffer. The viewport containing this must also be of special class, TCastleViewportScreenBuffer.

The setup can be tested with any 2D game designed in CGE viewport. E.g. you can place water volume in our examples/platformer/ game demo.

Detailed usage instructions:

  1. Get cge-2d-water-effect code.

  2. Point your project to cge-2d-water-effect sources. E.g. add this to CastleEngineManifest.xml:

      <compiler_options>
    <search_paths>
      <path value="code/" />
      <path value="../../../cge-2d-water-effect/src/" />
    </search_paths>
  </compiler_options>

  3. Include custom components in your project.

    1. Add to CastleEngineManifest.xml the line editor_units="CastleSceneScreenBuffer, CastleViewportScreenBuffer". See CastleEngineManifest.xml docs for examples.

    2. Open your project in CGE editor and use “Project -> Restart Editor (With Custom Components)”

    3. Be sure to also add CastleSceneScreenBuffer, CastleViewportScreenBuffer to some uses clause, to register components at runtime.

  4. Copy the cge-2d-water-effect/data into your project data, e.g. into my-project/data/2d-water/.

  5. Use TCastleViewportScreenBuffer where you would normally use TCastleViewport.

  6. Add to viewport instance of TCastleViewportScreenBuffer. Load there castle-data:/water2d/2d_water_plane.x3dv. Move it, scale, duplicate as necessary to set up your water volume.

Notable Replies

  1. @michalis Hm, this could be very interesting. :slight_smile:
    You have seen my “westbeach” picture over and over and last week I was already thinking about animating the sea (but did not know how). I don’t know yet if it will apply to my picture. I am currently tackling an animation routine but then I will surely come back to this to try it out!. :wink:

  3. This is not the XML you were supposed to edit. You’re editing castle-automatic-windows.manifest . Which is a Windows-only XML file that you should not need to ever edit or look at.

    You should edit the CastleEngineManifest.xml . As written in Water effect ready to use in 2D games, like a platformer demo – Castle Game Engine . It links to docs of this file too, CastleEngineManifest.xml examples · castle-engine/castle-engine Wiki · GitHub .

    Here’s a sample that works (I used this locally to modify examles/platformer/ to add water).

    <?xml version="1.0" encoding="utf-8"?>
<project name="platformer"
  standalone_source="platformer_standalone.lpr"
  game_units="GameInitialize"
  qualified_name="io.castleengine.platformer"
  caption="Platformer"
  editor_units="CastleSceneScreenBuffer, CastleViewportScreenBuffer"
>
  <version value="1.0.0" code="1" />
  <compiler_options>
    <search_paths>
      <path value="code/" />
      <path value="../../../cge-2d-water-effect/src/" />
    </search_paths>
  </compiler_options>
</project>

Continue the discussion at Castle Game Engine Forum

Participants

Avatar for Carring Avatar for michalis