simple game framework for scripting languages

[seaside]

Here's a GUI tool for technosaurus' svgame and 13x10 grid where you can try out images and text on each square. Just click in the upper left corner of any square where you want an image or text to start and then close the window. A dialog follows asking if you want an image, press enter and a fileselect dialog for the directory "/usr/share/pixmaps" opens. Press cancel and a text entry box opens. The program then rerenders the new svg. Repeat until done (sounds like a recipe )

Kind of a kludge because commands don't run inside the case statements until the window is closed. Best run in a terminal, since the program calls itself, you have to kill it to stop.

Cheers,
s

Code: Select all

 #!/bin/sh
# requires technosaurus' svgame
# svg-placer -click on location & close window
# run in terminal to kill

 if ! [ -f /tmp/svgame.svg ]; then 
echo '
<svg  width="640" height="480">
  <defs> 
    <pattern id="grid" width="48" height="48" patternUnits="userSpaceOnUse">
      <rect fill="white" stroke="black" x="0" y="0" width="48" height="48"/>
    </pattern>
  </defs>
  <rect fill="url(#grid)" stroke="black" x="0" y="0" width="640" height="480"/>
</svg>'  >/tmp/svgame.svg

fi

svgame  /tmp/svgame.svg  2>/dev/null  | \
while read LINE; do
case "$LINE" in
BUTTON*) 
LINE="${LINE//BUTTON=/}"
 x="${LINE%,*}" 
 y="${LINE##*,}" ;;
 *) exit 
;;
esac

Xdialog --title "Image or Text dialog" --stdout  --yesno "Is this an image file?" 0 0

case $? in
  0)
    FILE="`Xdialog --backtitle "Please choose Image." --title "Image selector" --stdout --no-buttons --fselect  /usr/share/pixmaps 0 0`"
	sed -i 's|</svg>||' /tmp/svgame.svg 
	
	echo '
	<image x="'$x'" y="'$y'" width="48" height="48"
	     xlink:href="'$FILE'" />
	</svg>' >>/tmp/svgame.svg ;;

  1)
	 TEXT="`Xdialog --backtitle "Please type text below" --title "Text Select" --stdout --no-wrap --inputbox "short text no wrap" 0 0`" 
	 sed -i 's|</svg>||' /tmp/svgame.svg 
	
	  echo ' 
	 <text x="'$x'" y="'$y'" 
	     style="font-size:20" fill="black"
	>'"$TEXT"'</text>
	</svg>' >>/tmp/svgame.svg ;;
   
  255)
       exit ;;
esac
done
$0 

[seaside]

technosaurus,

I just noticed that everything runs fine for the case statements in the 2nd version of the source code that included key and mouse events (but not /path/to/image) when I compiled it under Racy.

The other posting of svgame.tar.gz which was a compiled version, allowing a file to be passed on the command line, is the one that Racy is not handling the same way.

Would you be kind enough to post the source code for that compiled version

Description Here is a precompiled version.that takes an input filename as 1st arg.
usage:
svgame /path/to/image.svg | your_controls

I'd like to compile that in Racy and see if that cures the "case statements not being run problem"

Thanks,
s
(Can this be a gtk version level problem?)

[technosaurus]

formatting is scrunched, but here it is:

Code: Select all

#include <sys/inotify.h>
#include <gtk/gtk.h>
#include <string.h>
typedef struct _variable { char Name[ 512 ]; GtkWidget *Widget; } variable;
void key_press_event(GtkWidget *widget, GdkEventKey *event){printf("KEY=%s\n",gdk_keyval_name(event->keyval));}
void button_press_event(GtkWidget *widget, GdkEventButton *event){printf("BUTTON=%f,%f\n",event->x ,event->y);}
void refresh(gpointer data, gint fd, GdkInputCondition c){
char buffer[sizeof (struct inotify_event)];	variable *var; var = (variable *)data;
read( fd, buffer, sizeof(buffer) ); gtk_image_set_from_file(GTK_IMAGE(var->Widget),var->Name);}
int main(int argc, char **argv){ int watch, fd;	GtkWidget *window, *image, *eventbox; variable *var; var = g_malloc(sizeof(variable));
gtk_init (&argc, &argv); fd = inotify_init();
window = gtk_window_new(GTK_WINDOW_TOPLEVEL); eventbox = gtk_event_box_new (); image = gtk_image_new_from_file(argv[1]);
gtk_container_add(GTK_CONTAINER(window), eventbox); gtk_container_add(GTK_CONTAINER(eventbox), image);
watch = inotify_add_watch( fd, argv[1], IN_MODIFY ); var->Widget=image; strncpy(var->Name, argv[1], 512);
gdk_input_add( fd, GDK_INPUT_READ, refresh, (gpointer) var );
g_signal_connect((gpointer)window, "destroy", G_CALLBACK(gtk_main_quit), NULL);
g_signal_connect((gpointer) window, "button_press_event", G_CALLBACK(button_press_event), NULL);
g_signal_connect ((gpointer) window, "key_press_event", G_CALLBACK (key_press_event), NULL);
gtk_widget_show_all(window); gtk_main ();}

Note: need to replace printf with g_print and remove string.h

[seaside]

technosaurus,

Thank you very much for posting the source code. I compiled it in Racy5.3 and it works.

In case anyone else wants the Racy5.3 compiled version, I've attached it below.

Regards,
s

[seaside]

Here's a handier version of svg-placer that doesn't call itself, with the added ability to change text font size and color. Also, F3 brings up Inkscape.

Code: Select all

 #!/bin/sh
# requires technosaurus' svgame
# svg-placer -click on location 
# choose image or text
#F3 brings up inkscape

 if ! [ -f /tmp/svgame.svg ]; then 
echo '
<svg  width="640" height="480">
  <defs> 
    <pattern id="grid" width="48" height="48" patternUnits="userSpaceOnUse">
      <rect fill="white" stroke="black" x="0" y="0" width="48" height="48"/>
    </pattern>
  </defs>
  <rect fill="url(#grid)" stroke="black" x="0" y="0" width="640" height="480"/>
</svg>'  >/tmp/svgame.svg

fi

svgame  /tmp/svgame.svg  2>/dev/null  | \
while read LINE; do
case "$LINE" in
BUTTON*) 
	LINE="${LINE//BUTTON=/}"
	 x="${LINE%,*}" 
	 y="${LINE##*,}"
	 
	Xdialog --title "Image or Text dialog" --stdout  --yesno "Is this an image file?" 0 0
	
	case $? in
	  0)
	    FILE="`Xdialog --backtitle "Please choose Image." --title "Image selector" --stdout --no-buttons --fselect  /usr/share/pixmaps 0 0`"
		cp /tmp/svgame.svg /tmp/svgameNEW # need to copy else works once only
		
		sed -i 's|</svg>||' /tmp/svgameNEW 
	
		echo '
		<image x="'$x'" y="'$y'" width="48" height="48"
		     xlink:href="'$FILE'" />
		</svg>' >>/tmp/svgameNEW
		
		cp /tmp/svgameNEW /tmp/svgame.svg ;;
	
	
	  1)
		SEL=`Xdialog \
		        --title "Text Select" \
		         --stdout \
		        --3inputsbox  "Text Selector" 0 0 \
		            "Text to place" "" \
		            "Font Size" "20" \
		            "Color Name" "black"`
	
		cp /tmp/svgame.svg /tmp/svgameNEW # need to copy else works once only
		
		sed -i 's|</svg>||' /tmp/svgameNEW 
		 
		TEXT="${SEL%%/*}"
		n="${SEL#*/}"
		FONT="${n%/*}"
		COLOR="'"${SEL##*/}"'"
		
		  echo ' 
		 <text x="'$x'" y="'$y'" 
		     style="font-size:'"$FONT"'"  fill='"$COLOR"'
		>'"$TEXT"'</text>
		</svg>' >>/tmp/svgameNEW 
		
		cp /tmp/svgameNEW /tmp/svgame.svg ;;
	   
	  255)
	       exit ;;
	esac ;;
	
 KEY=F3) inkscapelite /tmp/svgame.svg ;;

*)  ;;

esac
done

Cheers,
s

[technosaurus]

Here is some portable collision detection code:

Code: Select all

#!/bin/ash
ALPHAS=" abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"
#alphas can represent tiles, sprites etc...
WIDTH=3
HEIGHT=3
GRID="   bbb   "
#so the grid looks like:
#   #
#bbb#
#   #
no_collision(){
	#x=$1 y=$2
	pos=${GRID:$(($1+$2*$HEIGHT)):1}
	retval=${ALPHAS%${pos}*}
	return ${#retval}
}
no_collision 1 1 || echo ${ALPHAS:$?:1}

basically collision detection would tell you if you are trying to place something where something else already exists... moving a character, placing a game piece etc...

[jamesbond]

The code on the first post doesn't work for me (and thus by extension all the other newer revisions because the part that doesn't work is the same for all revisions).

This part:

Code: Select all

void refresh(gpointer si, gint fd, GdkInputCondition c){
   char buffer[sizeof (struct inotify_event)];
   read( fd, buffer, sizeof(buffer) ); /* just clearing, don't care the type */
   gtk_image_set_from_file(si,IMAGE);} /* force redraw of image*/

only works once because if the file is deleted and re-created, the watch is lost after the first trigger.

The fix that works for me:

Code: Select all

void refresh(gpointer si, gint fd, GdkInputCondition c) {
	char buffer[sizeof (struct inotify_event)];
	gtk_image_set_from_file(si,IMAGE);  /* force redraw of image*/
		
	read( fd, buffer, sizeof(buffer) ); /* just clearing, don't care the type */
	inotify_rm_watch(fd, watch);
	watch = inotify_add_watch( fd, IMAGE, IN_MODIFY ); /* re-trigger watch in case file is deleted / recreated */
} 

[technosaurus]

That's why none of my examples deleted the file, only modified them by ln/cp/mv -f or echo > my.svg

I had tried something similar, but gtk would sometimes hiccup on remove/replace (depending on timing) ... there are events for delete (and create in watched directory) too. Watching the directory may be a better idea anyhow - would allow you to redraw the svg if one of the include images changes (for instance a character uses a weapon while standing still)

I may try testing it with the file watch mechanism that I started using in sit (basically so it works on win32 and mac as well)

[jamesbond]

That's why none of my examples deleted the file, only modified them by ln/cp/mv -f or echo > my.svg

I wasn't trying to do anything fancy. I was doing a rox-clock http://murga-linux.com/puppy/viewtopic.php?t=82734 and it dawned upon me that svgame would be an excellent platform for it. I used sed -i to update the svg, and it only worked the first time. Only upon strace-ing sed -i, I realised that it worked by creating a new file, and moving that file over the old one ... As it happens geany also works this way.

I had tried something similar, but gtk would sometimes hiccup on remove/replace (depending on timing) ... there are events for delete (and create in watched directory) too. Watching the directory may be a better idea anyhow - would allow you to redraw the svg if one of the include images changes (for instance a character uses a weapon while standing still)

Yes, but the problem with watching a directory is that you'll get notified for anything that happens in the directory. If you only need to watch a specific file then you will have to filter these events.

I may try testing it with the file watch mechanism that I started using in sit (basically so it works on win32 and mac as well)

I thought you're using the same mechanism there?

[technosaurus]

lets say your svg file is mygame/mygame.svg and you are watching the directory mygame. if a file is modified or created in that directory you simply redraw mygame.svg (not caring what file it is - it could be an included sub-image)

for sit I made a win32 version, meaning I couldn't use the linux specific inotify, so I used a glib/gio wrapper pseudo-equivalent

rather than using sed, you could probably just store the strings in variables and echo > them for redraws (it will be faster anyways)

[seaside]

rather than using sed, you could probably just store the strings in variables and echo > them for redraws (it will be faster anyways)

jamesbond,

Not only works with svgame but on your very nicely done rox-clock as well -

Code: Select all

j#!/bin/sh
# Copyright (C) jamesbond 2012
# License: GNU GPL Version 3 or later
#
# called by AppRun
#exec 2> /tmp/log-clock
APPDIR=${0%/*}

update_clock() {
	# date
	sed -i -e "s/ary>.*</ary>$(date +"%A %e %B %Y")</" \
${APPDIR}/AppInfo.xml
	
	# time
	time=$(date +%I-%M)
	hour=${time%-*} 
	minute=${time#*-}
	hour=${hour#0}	
	minute=${minute#0}

	HROTATE=$(( $hour*30 + $minute/2 ))
	MROTATE=$(( $minute*6 ))
	#echo $hour_rot $min_rot
	
	echo '<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="-1024 -1024 2048 2048" width="600" height="600">
  <title>Swiss Railway Clock</title>
  <style type="text/css">
    .bg {stroke: none; fill: white;}
    .fc {stroke: none; fill: black;}
    .h1 {stroke: none; fill: black;}
    .h2 {stroke: none; fill: #aa0000;}
  </style>
  <defs>
    <path id="mark1" d="M -20,-1000 l 40,0 0,100 -40,0 z" />
    <path id="mark2" d="M -40,-1000 l 80,0 0,240 -80,0 z" />
    <path id="mark3" d="M -40,-1000 l 80,0 0,300 -80,0 z" />
    <path id="handh" d="M -50,-600  l 50,-50 50,50 0,800  -100,0 z" />
    <path id="handm" d="M -40,-900  l 40,-40 40,40 0,1180 -80,0  z" />
    <g    id="hands">
      <path d="M -10,-910 l  10,-10 10,10 2,300 -24,0 z
               M -13,-390 l  26,0         7,690 -40,0 z" />
      <path d="M   0,-620 a 120,120 0 0 1 0,240
                          a 120,120 0 0 1 0,-240 z
               M   0,-560 a  60,60  0 0 0 0,120
                          a  60,60  0 0 0 0,-120 z" />
    </g>
    <g id="face1">
      <use xlink:href="#mark1" transform="rotate(06)" />
      <use xlink:href="#mark1" transform="rotate(12)" />
      <use xlink:href="#mark1" transform="rotate(18)" />
      <use xlink:href="#mark1" transform="rotate(24)" />
    </g>
    <g id="face2">
      <use xlink:href="#face1" />
      <use xlink:href="#face1" transform="rotate(30)" />
      <use xlink:href="#face1" transform="rotate(60)" />
      <use xlink:href="#mark3" />
      <use xlink:href="#mark2" transform="rotate(30)" />
      <use xlink:href="#mark2" transform="rotate(60)" />
    </g>
    <g id="face">
      <use xlink:href="#face2" />
      <use xlink:href="#face2" transform="rotate(90)"  />
      <use xlink:href="#face2" transform="rotate(180)" />
      <use xlink:href="#face2" transform="rotate(270)" />
    </g>
  </defs>
  <circle class="bg" r="1024" />
  <use xlink:href="#face"  class="fc" />
  <use xlink:href="#handh" class="h1" transform="rotate('"$HROTATE"')" />
  <use xlink:href="#handm" class="h1" transform="rotate('"$MROTATE"')" />
  <!-- <use xlink:href="#hands" class="h2" transform="rotate(168)" /> -->
</svg> ' > ${APPDIR}/clock.svg	
	
	#sed -i -e "
#/\#handh/ s/rotate(.*)/rotate($hour_rot)/
#/\#handm/ s/rotate(.*)/rotate($min_rot)/
#" ${APPDIR}/clock.svg
	rox -x ${APPDIR}	
}

# 1. initial update
update_clock

# 2. sync to the start of the minute
while [ $(date +"%S") -ne 0 ]; do sleep 1; done 

# 3. run the clock proper
while true; do
	update_clock
	sleep 60
done 

Cheers,
s

[jamesbond]

technosaurus, seaside,

Thanks for the info

cheers!

[technosaurus]

Todo: example of output mouse position on click

Maybe a dialog button.

[linuph]

I call this script 'control':

<svg width="640" height="480">
<image x="1" y="1" width="640" height="480"
xlink:href="/usr/share/backgrounds/default.jpg" />
<image x="1" y="1" width="64" height="48"
xlink:href="/usr/share/pixmaps/buddy.png" />
</svg>

With 'svgame | control' I get an error:
./control: line 1: syntax error near unexpected token 'newline'
./control: line 1: '<svg width="300" height="300">'

The web is full with questions about this but I can't find a solution. Has it to to with line endings? Geany shows 'LF'. What should this script be? Just a script, or .xml or with #!/bin/sh in the top line.

A lot to learn here...

[linuph]

Double post

[technosaurus]

It's an svg image. Scripts begin with #!/bin/something and need to have the executable bit set.

[linuph]

Using #!/bin/sh now, but the 'newline' error remains. Same in #!/bin/ash, if that means anything. I understand that '<' has special meaning in Bash, reason for the error. What could be the problem?

[Keef]

I'm just guessing here, but after looking at other examples on the page, is your code sequence quoted properly?
eg

Code: Select all

 echo ' < blah blah> '

[linuph]

Thanks Keef. Being not quoted was the problem. I had a thorough misunderstanding of how the svgame program works. Solved.

[technosaurus]

to further confuse everyone new to this topic, here is my latest research results for svg and "sprites"... I found it easier to include a second svg rather than the more complicated method of filling a rectangle with a pattern from an image (it may be slower to render but I couldn't figure out a good way to slice the png sprites for fill patterns)

Code: Select all

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="512" height="354" viewBox="0 176 256 176">

<image xlink:href="zelda-map.png" height="1408" width="4096" />

<svg x="32" y="240" width="16" height="16" viewBox="0 0 16 16">
<image xlink:href="link.png" width="432" height="303" />
</svg>

</svg>

Note: the <image> width and height are the total width and height of the image whereas the <svg> width and height are the displayed width and height
Note2: the viewbox is xoffset yoffset width height of the image "slice"
Note3: the link.png image has an x and y attribute that are relative to the actual image size from the parent viewbox (0 and 176 in this case) ... thus the image will be scaled to 32x32 since the parent is scaled 2x2 (width='512' height='354' with viewport width of 256 and 176 ... such that the main width and height can be set to 100% for full scale rendering without having to calculate the values for all of the sprites)