48
Inordertocreatethiskindofgame,addthetag<collisions>on</collisions>
tothebackgroundimage. Allthedetailswillthenbecomesolidandwillprevent
objects(pngimportedfilesorbitmapcopiesofshapescreatedinInkscape)from
beingmovedthroughthem.
The"collision"gameisinfact agameDragAndDropgame,sincethegoalre-
mainstodragoneorseveralobjectsanddropthemsomewhereontheimage.The
requisitetagsforthistemplatearethereforethesameasinthegameDragAndDrop
template
14
, butyouwillapply y the<collisions>off</collisions>tag tothe
dropzone’sDescriptionfield.
Onceyoursvgsourcefileiscreated,choosethetemplategameDragAndDropto
generatetheinteractivegame.
d
Advanced interactive games creation tips: Magnet ef-
fect,tooltips,double-scoring...
Showingtheplayer’sscore(game1clictemplate)
Itispossibletodisplaygraphicalelementsautomaticallywhentheuserselects
thecorrectanswer.Theseelementscanbepngimportedimagesorshapesdirectly
designedinInkscape.ButasXiaconsidersasaclickabledetailanyshapesdesigned
usingInkscapetools,youwillhavetotransformtheseshapesinbitmap,usingthe
"bitmapcopy"Inkscapetool.Forexample:
1. Drawastar r withyellowsidesonayellowbackgroundwiththeInkscape
tools
2. Selectthisstar,andclickontheEdition → Make a a bitmap p copy
3. Deletethefirststar
Whenthegraphicalelementsareimported(pngfiles)orcreated(bitmapcopy
ofshapescreatedmanually),justapplythefollowingcarasteristics totheseele-
ments:
Interactivity > > OnClick=off
Then,grouptheclickabledetailtoitsgraphicalelement(bysuccessivelyclicking
onthedetailandthegraphicalelementwiththe
Shift⇑
keystrokeon),thenselect
GroupintheInkscapeObjectmenu.
Showingtheplayer’smistakes(game1clictemplate)
Games basedonthedetails selectionprincipleareobviouslyvery interesting
educationalgames...butitisalsoquiteobvioustoguesshowsomestudentsmay
betemptedtocheattoachievesuchgames(forexample,byfreneticallyclicking
everywhereontheimage,untilthefinalmessagepopsup).
Thisis why itmaybeinterestingtobeabletohighlightthe user’smistakes
duringthegame.
To do so, youwill anticipate the user’s probable mistakes, andput explicit
graphicalelementssymbolizingtheseerrorsonthebackgroundimage.Thisgraph-
icalelementmaybeanimportedimage(pngfile)orashapedirectlydesignedwith
14. <target></target>ontheobjects,<score></score>and<message></message>onthe
backgroundimage:seesectionb.
19