Is Ren'Py's Screen Language similar to any other front-end framework?

Discuss how to use the Ren'Py engine to create visual novels and story-based games. New releases are announced in this section.
Forum rules
This is the right place for Ren'Py help. Please ask one question per thread, use a descriptive subject like 'NotFound error in option.rpy' , and include all the relevant information - especially any relevant code and traceback messages. Use the code tag to format scripts.
Post Reply
Message
Author
User avatar
Karrion
Regular
Posts: 73
Joined: Fri Jan 18, 2019 8:33 pm
Projects: Murder on the Marine Express
Organization: 1564 Studio
itch: 1564-studio
Contact:

Is Ren'Py's Screen Language similar to any other front-end framework?

#1 Post by Karrion »

I don't know if I should put this here or somewhere else, but since it's related to the engine itself, I thought it would be appropriate.

I've been recently studying a bit on the web/app side of development and have been wondering if my experience with working on the UI/UX of my games will help me while learning other frameworks, not necessarily python-based. So, as the title says; is Ren'Py's Screen Language similar to the one used in some other framework?
1564 Studio, an indie studio dedicated to developing mystery VNs!
Follow us on Twitter for updates on our projects!

Image

Check out our current project, just released on PC, Android, Switch, XBox ONE/Series S/X and PS4/5!
Also available in Spanish, English, French and Japanese!

Image

User avatar
Ocelot
Lemma-Class Veteran
Posts: 2384
Joined: Tue Aug 23, 2016 10:35 am
Github: MiiNiPaa
Discord: MiiNiPaa#4384
Contact:

Re: Is Ren'Py's Screen Language similar to any other front-end framework?

#2 Post by Ocelot »

I would say it is a pretty typical declarative markup language with some sprinkles like the ability to use Python in it. Compare this xml example from Android documentation:

Code: Select all

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical" >
    <TextView android:id="@+id/text"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="Hello, I am a TextView" />
    <Button android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello, I am a Button" />
</LinearLayout>
to this fragment of RenPy screen:

Code: Select all

vbox:
    xfill True
    yfill True
    text "Hello, I am a text" id "some_text"
    textbutton "Hello, I am a textbutton" id "some_button"
You can also spot differences. In Android you would attach button listeners (actions) later. In RenPy you have to do it right now in screen definitions, as you would normally do in delphi, if you would edit form file and not use visual editor:

Code: Select all

object DfmCheck_FormProgress: TDfmCheck_FormProgress
  Left = 365
  Top = 244
  ActiveControl = BtnAbort
  BorderStyle = bsDialog
  Caption = 'Delphi DFM Check'
  ClientHeight = 88
  ClientWidth = 381
  Color = clBtnFace
  Font.Charset = DEFAULT_CHARSET
  Font.Color = clWindowText
  Font.Height = -11
  Font.Name = 'Tahoma'
  Font.Style = []
  OldCreateOrder = False
  OnCloseQuery = FormCloseQuery
  OnCreate = FormCreate
  OnPaint = FormPaint
  PixelsPerInch = 96
  TextHeight = 13
  object LblStatus: TLabel
    Left = 8
    Top = 11
    Width = 44
    Height = 13
    Caption = 'LblStatus'
  end
  object ProgressBar: TProgressBar
    Left = 8
    Top = 30
    Width = 365
    Height = 17
    TabOrder = 0
  end
  object BtnAbort: TButton
    Left = 153
    Top = 53
    Width = 75
    Height = 25
    Caption = '&Abort'
    TabOrder = 1
    OnClick = BtnAbortClick
  end
end
Or this GUI example from jMonkeyEngine:

Code: Select all


<?xml version="1.0" encoding="UTF-8"?>
<nifty xmlns="http://nifty-gui.lessvoid.com/nifty-gui" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="https://raw.githubusercontent.com/void256/nifty-gui/1.4/nifty-core/src/main/resources/nifty.xsd https://raw.githubusercontent.com/void256/nifty-gui/1.4/nifty-core/src/main/resources/nifty.xsd">
    <useStyles filename="nifty-default-styles.xml"/>
    <useControls filename="nifty-default-controls.xml"/>
    <screen id="start" controller="mygame.MyStartScreen">
        <layer id="background" childLayout="center">
            <image filename="Interface/start-background.png"></image>
        </layer>
        <layer id="foreground" childLayout="vertical">
            <panel id="panel_top" height="25%" width="75%" align="center" childLayout="center">
                <text text="My Cool Game" font="Interface/Fonts/Default.fnt" width="100%"
                  height="100%"/>
            </panel>
            <panel id="panel_mid" height="50%" width="75%" align="center" childLayout="center">
                <text text="Here goes some text describing the game and the rules and stuff.
                  Incidentally, the text is quite long and needs to wrap at the end of lines."
                      font="Interface/Fonts/Default.fnt" width="100%" height="100%" wrap="true"/>
            </panel>
            <panel id="panel_bottom" height="25%" width="75%" align="center"
              childLayout="horizontal">
              <panel id="panel_bottom_left" height="50%" width="50%" valign="center" childLayout="center">
                <control name="button" label="Start" id="StartButton" align="center" valign="center"
                  visibleToMouse="true" >
                  <interact onClick="startGame(hud)"/>
                </control>
              </panel>
              <panel id="panel_bottom_right" height="50%" width="50%" valign="center" childLayout="center">
                <control name="button" label="Quit" id="QuitButton" align="center" valign="center"
                  visibleToMouse="true" >
                  <interact onClick="quitGame()"/>
                </control>
              </panel>
            </panel>
        </layer>
    </screen>
    <screen id="hud" controller="de.lessvoid.nifty.screen.DefaultScreenController">
        <layer id="background" childLayout="center">
            <image filename="Interface/hud-frame.png"
              imageMode="resize:40,490,110,170,40,560,40,270,40,560,40,40" width="100%"
              height="100%">
            </image>
        </layer>
        <layer id="foreground" childLayout="horizontal">
            <panel id="panel_left" width="80%" height="100%" childLayout="vertical">
            </panel>
            <panel id="panel_right" width="20%" height="100%" childLayout="vertical">
                <panel id="panel_top_right1" width="100%" height="15%" childLayout="center">
                    <control name="label" color="#000" text="123" width="100%" height="100%"/>
                </panel>
                <panel id="panel_top_right2" width="100%" height="15%" childLayout="center">
                    <image filename="Interface/face1.png" valign="center" align="center"
                      height="50%" width="30%">
                    </image>
                </panel>
                <panel id="panel_bot_right" width="100%" height="70%" valign="center">
                </panel>
            </panel>
        </layer>
    </screen>
</nifty>
You can kinda see objects and properties here too.

So, the main idea: declaring an hierarchy of objects with certain properties is the same. However exact syntax, and minute details can differ wildly between different flavors of markup. For example, if you need something added dynamically, in RenPy you will have your screen evaluate and conditionally create elements, in other three examples, you would programatically access container by id and add more elements in code.
< < insert Rick Cook quote here > >

User avatar
Karrion
Regular
Posts: 73
Joined: Fri Jan 18, 2019 8:33 pm
Projects: Murder on the Marine Express
Organization: 1564 Studio
itch: 1564-studio
Contact:

Re: Is Ren'Py's Screen Language similar to any other front-end framework?

#3 Post by Karrion »

Thank you, that's exactly what I was looking for :)
1564 Studio, an indie studio dedicated to developing mystery VNs!
Follow us on Twitter for updates on our projects!

Image

Check out our current project, just released on PC, Android, Switch, XBox ONE/Series S/X and PS4/5!
Also available in Spanish, English, French and Japanese!

Image

Post Reply

Who is online

Users browsing this forum: Bing [Bot]