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?
Is Ren'Py's Screen Language similar to any other front-end framework?
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.
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.
- 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?
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:
to this fragment of RenPy screen:
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:
Or this GUI example from jMonkeyEngine:
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.
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>
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"
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
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>
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 > >
- 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?
Thank you, that's exactly what I was looking for
Who is online
Users browsing this forum: Bing [Bot]